目录
项目开发流程
目录风格
代码组织格式
目录结构
项目开发流程
- 划分目录
- 引用两个css文件
- 项目模块划分：tabbar->路由映射关系
目录风格
文件夹字母小写，组件首字母大写比较清晰
代码组织格式
- 一个项目里页面唯一的用id，多个用class
- methods，方法里面写函数，生命周期只负责调用就行
- 页面复杂的话就再分子组件
- $el：相当于根组件，可以拿到组件的js原生值比如浏览宽高
目录结构
注意看每个文件的后缀名，没有后缀的就是文件夹。
src
assets 静态资源
css
base 地基（公共样式，自己的）
normalize 标准化（初始化样式，第三方的）
images
cart 购物车文件夹
common 公共的文件夹
detail 分支（详情页）
home 主页
profile 个人档案（个人页）
tabbar 列表（标签栏）
common 公共(放当前公共的js,混入和防抖，时间正则)
mixin 混入
utils 常用工具
components 公共组件（下面组件的js都放到自己的文件夹内）
common 公共（组件，在别的项目也可以复用的）
navbar 导航条
scroll 滚动
swiper 插件（轮播图插件）
tabbar 列表（tab栏）
toast 吐丝（加入购物车的弹窗）
content 内容（组件，在当前项目可以复用的）
backTop 回到顶部
checkButton 复选框
goods 商品
mainTabbar 最大的列表（我的，购物车，首页等）
tabControl 选项卡控件（遍历流行新款精选）
network 网络（网络请求相关js）
detail 分支（把没有规律的数据封装成一个类）
home 首页（首页面向首页js开发）
request 请求（封装axios,让请求面向这个）
router 路由
index.js 索引 （创建路由对象和懒加载各页面，默认显示首页）
store 仓库
actions.js 行动（向到购物车添加商品数量）
getters.js 吸气
index.js 索引（这个目录里都是vuex的东西，官方推荐这样分开封装）
mutation-types.js 变化型
mutation.js 变化
views 视图
cart 购物车
childComps (包含购物车的小组件)
Cart.vue
category 分类
detail 分支（详情页）
childComps （详情页的小组件）
Detail.vue
home 首页
childComps （首页的小组件）
Home.vue
profile 个人档案
App.vue 平台
main.js 最重要的（渲染主页面）
.editorconfig 设置编程风格的统一
vue.config.js 配置 最后，喜欢学习的小伙伴可以关注下面公_号前端老实人，可以一起交流学习！！❤