yarn install
yarn serve
yarn build
yarn lint
node_modules -- 所有的项目依赖包都放在这个目录下
public -- 公共文件夹
favicon.ico -- 网站的显示图标
index.html -- 入口的html文件
src -- 源文件目录,编写的代码基本都在这个目录下
api -- 请求
constants.js -- 定义一个常量数据和后台保持一致,这样不请求后台就能展示一级分类,不至于白屏
category.js -- 分类相关api请求
home.js -- 首页相关api请求
product.js -- 商品详情相关api请求
user.js -- 用户相关的api请求
assets -- 放置静态文件的目录
images -- 图片
style -- less预处理器脚本
common.less -- 重置样式
minxins.less -- 混入(函数式),vue.config.js已配置,使用后每个元素有动画效果
variables.less -- 全局less变量
components -- 全局组件,公共组件
app-topnav.vue -- 顶部通栏(固定)
app-header.vue -- 头部(存在二级分类)
app-footer.vue -- 底部
app-header-nav.vue -- 头部和滑动吸顶效果用的是同一种方式,封装成一个组件
app-header-sticky.vue -- 吸顶头部
app-member-aside.vue -- 个人中心左侧菜单
Message.js -- 消息提示(将XtxMessage组件,设置为函数式调用)
library -- 全局组件插件
xtx-skeleton.vue -- 骨架屏组件 (未加载成功时显示,类似于Vant中的骨架屏,可以对其设置宽高背景等样式),
xtx-carousel.vue -- 轮播图组件
xtx-more.vue -- 面板组件(右上角存在:"查看更多"的标题,公用一个组件,注意唯一不同的是跳转的页面不同)
xtx-bread.vue -- 面包屑(函数式组件使用render函数渲染模版)
xtx-bread-item.vue -- 单个面包屑组件(参考ElementUi)
xtx-infinite-loading.vue -- 无限加载组件(有数据加载时展示 加载中..)(没有数据时 展示: 没有更多了..)
xtx-city.vue -- 城市组件(选择地址)
xtx-message.vue -- 消息提示组件(添加成功,登录成功时,登录失败,警告等提示),注意:没有挂载到原型
index.js -- 注册全局插件(图片懒加载,批量注册组件)
hooks -- 全局方法(全局复用方法)
mock -- 模拟数据
router -- 路由
store -- Vuex
modules -- 模块化
user.js -- 用户模块
cate.js -- 购物车模块
category.js -- 分类模块
index.js -- Vuex
utils -- 工具
request.js -- 封装请求方法
vee-validate-schema.js -- 表单校验规则
vender -- 第三方Js
views -- 路由页面
Layout.vue -- 布局容器
brand -- 品牌
category -- 分类
index.vue -- 一级分类(首页点击一级类目根据id来到此组件)
sub.vue -- 二级分类(首页点击二级类目图片根据id来到此组件)
components
goods-item.vue -- 单个商品组件
sub-bread.vue -- 二级分类页面的面包屑组件
sub-filter.vue -- 二级分类筛选区域
sub-sort.vue -- 二级分类排序区域
goods -- 商品
index.vue -- 商品布局页面
components
goods-image.vue -- 商品图片预览区域(左侧大图和右侧五个小图)
goods-relevant.vue -- 商品推荐
goods-sales.vue -- 商品信息(放大镜图片预览下的信息,静态页面)
goods-name.vue -- 商品逆袭(右侧商品信息)
goods-sku.vue -- 规格选择组件(颜色,尺寸..)
home -- 首页
components
home-category.vue -- 首页左侧侧边栏
home-banner.vue -- 装载首页轮播图的容器(轮播图组件数据不是固定的,不能固定宽高,可能其他地方要使用,所以重新定义一个容器)
home-panel.vue -- 面板组件(负责每个楼层的标题和右侧内容)
home-skeleton.vue -- 骨架屏组件(用于人气推荐和新鲜好物使用,防止数据为加载完成时的白屏效果)
home-new.vue -- 新鲜好物
home-hot.vue -- 人气推荐
home-brand.vue -- 热门品牌
home-goods.vue -- 单个商品(每个商品)
home-product.vue -- 承载单个商品的容器
home-special.vue -- 最新专题
商品区域和最新专题没有做骨架屏效果,只做了数据懒加载和图片懒加载
member -- 会员中心
pay -- 结算支付
home -- 个人中心首页
order -- 订单管理
search -- 搜索
login -- 登录
components
login-form.vue -- 登录框的表单组件
login-header.vue -- 登录页头部
login-footer.vue -- 登录页底部
App.vue -- 根组件
main.js -- 入口文件
.browserslistrc -- 在不同前端工具之间公用目标浏览器和node版本的配置文件,作用是设置兼容性
.editorconfig -- 编辑器使用的文件,使用习惯等
.eslintignore -- eslist校验忽略文件
.eslintrc.js -- Eslint的配置文件
jsconfig.json -- @代表src,提示路径
.gitignore -- 用来配置那些文件不归git管理
README.md -- 项目的说明文件,使用markdown语法进行编写
yarn.lock -- 使用yarn后自动生成的文件,由Yarn管理,安装yarn包时的重要信息存储到yarn.lock文件中
vue.config.js -- webpackxtx-more.vue 查看更多和负责跳转
home-panel.vue 容器 标题 内容
组成一个楼层面板
<HomePanel title="标题" subTitle="副标题">
// 右侧插槽
<template #right>
<!-- 查看更多 -->
<XtxMore path="/"></XtxMore>
</template>
// 插槽
<div>数据内容区域</div>
</HomePanel>一个元素显示或隐藏时,才可以触发动画
使用tranistion组件实现动画,一个元素或者组件的(显示/隐藏,创建/移除)
进入
进入前 v-enter (v-enter-from-Vue3)
进入中 v-enter-active
进入后 v-enter-to
离开
离开前 v-leave (v-leave-from-Vue3)
离开中 v-leave-active
离开后 v-leave-to
<transition>
<div class="box" v-if="show"></div>
</transition>
.v-enter-from {
opacity: 0;
}
.v-enter-active {
transition: all 2s;
}
.v-enter-to {
opacity: 1;
}
// 可以给动画赋予名字用来生成多个
<transition name="fade">
<div class="box" v-if="show"></div>
</transition>
.fade-enter-from {
opacity: 0;
}
.fade-enter-active {
transition: all 2s;
}
.fade-enter-to {
opacity: 1;
}XtxBread 是承载面包屑的容器
XtxBreadItem 是单个面包屑
参考elementui的做法
可以多次复用,也可以运用多级分类,而且第一个分类的值是首页时固定的
面包屑的动画效果,如果加上mode属性,会使数据丢失,还未解决 useWindowScroll <吸顶效果 没有使用>
useVModel <父子组件双向绑定>
useMouseInElement <用于放大镜效果>
useIntersectionObserver <监听元素是否进入可视区>
onClickOutside <监听元素外部的点击,城市选择框点击其他位置关闭>
useIntervalFn <用于发送验证码的60秒倒计时>如果想在组合式API中使用实例
注意:此时已挂载到原型的基础上 app.config.globalProperties.$messgae = Message
const { proxy } = getCurrentInstance()
proxy.$message()
------
proxy = this 相同的意思