前言
当一个项目没有很好的目录规范的时候,当接受一个目录结构很紊乱的项目时,理清楚整个项目的逻辑与业务流程就显得十分的困难。同时,维护的难度也会加大。所以在一个团队中,规范的目录结构也是十分重要的 按照业务划分目录的所属关系,因为业务所属关系的稳定性高于UI交互所属关系的稳定性,所以采用业务所属关系确定页面目录的所属关系。
目标文件夹结构
适用于vue2,vue3和使用mpx语法的小程序
├──src
│ ├──components //基础组件
│ ├──pages //页面
| ├──common //公共页
│ ├──sample-page
| |——sample-page
│ ├──sample-page //业务页
│ ├──components //页面业务组件
| |——sample-page
| |——sample-page
| |——layout //布局●注释1
│ ├──utils //JS工具库
| |—— sample
│ ├──api //api接口
│ ├──style //公共样式,如主题
| |——store //vuex
| |——router //路由
│ ├── App.vue
│ ├── Main.js
│ ├── assets // 主题 字体等静态资源,会被编译打包,存放组件资源,其他资源放在src同级的static目录下
├──config //配置
├──static //静态资源 不会被打包
└── package.json
说明:基础组件 放置在components下,业务组件放置在对应页面下的components下 pages页面下除common外,user-center目录名仅做示例,具体命名以实际项目为准 页面位置一旦确定后不允许修改,确有修改的需要则向前端负责人申请
注释1 layout代表基础布局 如,pc端的导航栏(导航栏区域,不特指导航栏组件)是pc项目的layout,移动端的 tabbar(同上条,指tabbar区域的) 为 layout , mpx小程序/微信小程序的app.vue/json文件 对应layout,除如小程序等框架本身存在layout布局外,均应按照此标准执行
如何区分公共页面和公共(基础)组件?
独立完整的页面--公共页面,如商品详情页,由其他页面通过路由跳转进入 页面中共用的部分--公共组件,如商品展示card,嵌入页面中 注意! 当有新建页面需求时,页面新建位置在设计书中体现,由前端负责人确定。
别名规范
- 路径别名只能由前端负责人创建
- 别名层级不得超过三级(src为第一级)
- 三级别名带上二级别名简写以横杠连接(前3~4个字母)
//如 src/utils/sensor
@ ---- src/
utils ---- src/utils
uti-sensor ---- src/utils/sensor
//
// 若sensor下还有目录则不允许设置别名
// 如 src/utils/sensor/other
other ---- src/utils/sensor/other // 此类别名不允许
于此同时,在webpack配置/vite配置等打包工具中设置别名后同时在根目录下的 jsconfig.json / tsconfig.json 中同步维护别名(在jsconfig.json / tsconfig.json中配置了后,在编译器中可以按住Ctrl+click跳转)。
jsconfig.json / tsconfig.json需要在根目录下,才能被vscode识别。多文件无法生效,建议通过添加工作区的方式打开多项目。