成为构架师必知的Vue目录结构和构建规范，恩师王红元的蘑菇街项目❤

Posted 2021-09-26 前端老实人

目录

项目开发流程

目录风格

代码组织格式

目录结构 

---

项目开发流程

1. 划分目录
2. 引用两个css文件
3. 项目模块划分：tabbar->路由映射关系

目录风格

文件夹字母小写，组件首字母大写比较清晰

代码组织格式

1. 一个项目里页面唯一的用id，多个用class
2. methods，方法里面写函数，生命周期只负责调用就行
3. 页面复杂的话就再分子组件
4. $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  配置 

最后，喜欢学习的小伙伴可以关注下面公_号前端老实人，可以一起交流学习！！❤