共计 2064 个字符，预计需要花费 6 分钟才能阅读完成。
为什么需要前端专属的项目结构
这里说到目录结构，想必不少程序员会想到按职能分目录吧！以下所提的目录结构为单页面目录结构
以下面这种为例 [按职能划分]
├──src
│ ├──view // 页面
│ ├──utils //JS 工具库
│ ├──api //api 接口
│ ├──style //style
│ ├──config // 配置
│ ├──model //model 层其实是 redux 或 vux 文件
│ ├──component // 组件
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
│ ├── assets // 主题 字体等静态资源
├── index.html // html 模板
└── package.json
其实该目录结构完全没问题, 按职能划分结构非常清晰,api 放 api, 静态资源放 assets 里等等。但是前端目录结构, 笔者认为应该对于页面和组件继续细分。
举个列子当项目较大时,api 目录里存在 api 将会非常之多。大致效果如下图: 该图为笔者某个项目的 api 结构图, 虽然笔者按照某个约定 api 文件名 ==view 里对应的页面组名. 但是真正维护起来有时会遇到这么两种常见情况. 1. 删除页面：你将删除 pages/carts[购物车页面] 里的某个页面, 但是问题来了你不确定 api/carts[购物车 api] 哪些 api 才是不用的, 其实没用到的有些 IDE 会提示。2. 复制移动组件或页面: 比如你想复制组件, 由于划分颗粒度不够细, 你又一次面临该组件对应什么 api 和什么静态资源, 这么移动复制时只能靠猜了 = =
其实出现上面问题, 就是该种按职能划分的方法不太适合前端。如果你仔细想想前端页面的删除逻辑, 你就会知道我们一般会去做删除或废弃的单位就是页面或组件, 所以笔者前端目录应该对于页面和组件继续细分
这里在扯远点, 不知各位看官老爷是否记得 MVC 框架，这个衍生于后端思维的前端框架。为什么会被 MVVM 框架逐渐取代? 原因就是 MVC 这种框架不适合前端这种频繁需要数据和页面组件联动的场景, 因为前端不仅仅是管好数据并渲染这么简单, 而是要应付各种数据变化对应的页面组件变化, 而 MVVM 框架恰能解决该痛点。所以，后端这种按职能划分的目录结构虽好，但用于前端也不是最合适的方案。
目标
在按职能划分目录的基础上, 再细分到按页面和组件划分目录，做到删除组件时不会牵连到其他组件和页面！不会出现页面删除后，资源还常驻于项目中成为钉子户.
解决方案
示例结构
├──src
│ ├──view // 页面
│ ├──carts // 购物车页面
│ ├──component // 该页面专用组件
│ ├──model.js // 该页面的数据层 [redux 和 vuex 文件的细分]
│ ├──index.js // 该页面的布局文件
│ ├──service.js // 该页面用到的 api
│ ├──index.scss // 该页面用到的 scss
│ ├──utils //JS 工具库
│ ├──api // 共用 api 接口【永不删除】
│ ├──style // 共用 style【永不删除】
│ ├──config // 配置
│ ├──model // 共用 model 层其实是 redux 或 vux 文件【永不删除】
│ ├──component // 共用组件
│ ├──map // 地图组件
│ ├──model.js // 该组件的数据层 [redux 和 vuex 文件的细分]
│ ├──index.js // 该组件的布局文件
│ ├──service.js // 该组件用到的 api
│ ├──index.scss // 该组件用到的 scss
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
│ ├── assets // 主题 字体等静态资源【永不删除】
├── index.html // html 模板
└── package.json
这里分为三个级别共用级别, 页面级别, 组件级别
共用级别
这个好理解, 就是项目经常会共用到的资源，基本上一旦定下, 为了项目稳定就永不删除了。
页面级别
│ ├──view // 页面
│ ├──carts // 购物车页面
│ ├──component // 该页面专用组件
│ ├──model.js // 该页面的数据层 [redux 和 vuex 文件的细分]
│ ├──index.js // 该页面的布局文件
│ ├──service.js // 该页面用到的 api
│ ├──index.scss // 该页面用到的 scss
可见围绕该页面各种职能的文件又再建一遍, 且都为该页面专用, 连组件也是页面专用级别的。
组件级别
│ ├──component // 共用组件
│ ├──map // 地图组件
│ ├──assets // 该组件专用图片或 icon
│ ├──model.js // 该组件的数据层 [redux 和 vuex 文件的细分]
│ ├──index.js // 该组件的布局文件
│ ├──service.js // 该组件用到的 api
│ ├──index.scss // 该组件用到的 scss
可见围绕该组件各种职能的文件又再建一遍, 且都为该组件专用。
总结
在按职能划分目录的基础上, 再细分到按页面和组件划分目录。如此这般, 组件想删即删想改即改，副作用更可控!! 再也不怕留下钉子户资源啦！
