前端目录结构规范

2,850 阅读3分钟

前言

当一个项目没有很好的目录规范的时候,当接受一个目录结构很紊乱的项目时,理清楚整个项目的逻辑与业务流程就显得十分的困难。同时,维护的难度也会加大。所以在一个团队中,规范的目录结构也是十分重要的 按照业务划分目录的所属关系,因为业务所属关系的稳定性高于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识别。多文件无法生效,建议通过添加工作区的方式打开多项目。