一、为什么要划分

使用vue构建项目，项目结构清晰会提高开发效率，熟悉项目的各种配置同样会让开发效率更高

在划分项目结构的时候，需要遵循一些基本的原则：

• 文件夹和文件夹内部文件的语义一致性
• 单一入口/出口
• 就近原则，紧耦合的文件应该放到一起，且应以相对路径引用
• 公共的文件应该以绝对路径的方式从根目录引用
• /src 外的文件不应该被引入

文件夹和文件夹内部文件的语义一致性

我们的目录结构都会有一个文件夹是按照路由模块来划分的，如pages文件夹，这个文件夹里面应该包含我们项目所有的路由模块，并且仅应该包含路由模块，而不应该有别的其他的非路由模块的文件夹

这样做的好处在于一眼就从 pages文件夹看出这个项目的路由有哪些

单一入口/出口

举个例子，在pages文件夹里面存在一个seller文件夹，这时候seller 文件夹应该作为一个独立的模块由外部引入，并且 seller/index.js 应该作为外部引入 seller 模块的唯一入口

复制
1// 错误用法
2import sellerReducer from 'src/pages/seller/reducer'
3
4// 正确用法
5import { reducer as sellerReducer } from 'src/pages/seller'

这样做的好处在于，无论你的模块文件夹内部有多乱，外部引用的时候，都是从一个入口文件引入，这样就很好的实现了隔离，如果后续有重构需求，你就会发现这种方式的优点

就近原则，紧耦合的文件应该放到一起，且应以相对路径引用

使用相对路径可以保证模块内部的独立性

复制
1// 正确用法
2import styles from './index.module.scss'
3// 错误用法
4import styles from 'src/pages/seller/index.module.scss'

举个例子

假设我们现在的 seller 目录是在 src/pages/seller，如果我们后续发生了路由变更，需要加一个层级，变成 src/pages/user/seller。

如果我们采用第一种相对路径的方式，那就可以直接将整个文件夹拖过去就好，seller 文件夹内部不需要做任何变更。

但是如果我们采用第二种绝对路径的方式，移动文件夹的同时，还需要对每个 import 的路径做修改

公共的文件应该以绝对路径的方式从根目录引用

公共指的是多个路由模块共用，如一些公共的组件，我们可以放在src/components下

在使用到的页面中，采用绝对路径的形式引用

复制
1// 错误用法
2import Input from '../../components/input'
3// 正确用法
4import Input from 'src/components/input'

同样的，如果我们需要对文件夹结构进行调整。将 /src/components/input 变成 /src/components/new/input，如果使用绝对路径，只需要全局搜索替换

再加上绝对路径有全局的语义，相对路径有独立模块的语义

/src 外的文件不应该被引入

vue-cli脚手架已经帮我们做了相关的约束了，正常我们的前端项目都会有个src文件夹，里面放着所有的项目需要的资源，js, css, png, svg 等等。src 外会放一些项目配置，依赖，环境等文件

这样的好处是方便划分项目代码文件和配置文件

二、目录结构

单页面目录结构

复制
1project
2│  .browserslistrc
3│  .env.production
4│  .eslintrc.js
5│  .gitignore
6│  babel.config.js
7│  package-lock.json
8│  package.json
9│  README.md
10│  vue.config.js
11│  yarn-error.log
12│  yarn.lock
13│
14├─public
15│      favicon.ico
16│      index.html
17│
18|-- src
19    |-- components
20        |-- input
21            |-- index.js
22            |-- index.module.scss
23    |-- pages
24        |-- seller
25            |-- components
26                |-- input
27                    |-- index.js
28                    |-- index.module.scss
29            |-- reducer.js
30            |-- saga.js
31            |-- index.js
32            |-- index.module.scss
33        |-- buyer
34            |-- index.js
35        |-- index.js

多页面目录结构

复制
1my-vue-test:.
2│  .browserslistrc
3│  .env.production
4│  .eslintrc.js
5│  .gitignore
6│  babel.config.js
7│  package-lock.json
8│  package.json
9│  README.md
10│  vue.config.js
11│  yarn-error.log
12│  yarn.lock
13│
14├─public
15│      favicon.ico
16│      index.html
17│
18└─src
19    ├─apis //接口文件根据页面或实例模块化
20    │      index.js
21    │      login.js
22    │
23    ├─components //全局公共组件
24    │  └─header
25    │          index.less
26    │          index.vue
27    │
28    ├─config //配置（环境变量配置不同passid等）
29    │      env.js
30    │      index.js
31    │
32    ├─contant //常量
33    │      index.js
34    │
35    ├─images //图片
36    │      logo.png
37    │
38    ├─pages //多页面vue项目，不同的实例
39    │  ├─index //主实例
40    │  │  │  index.js
41    │  │  │  index.vue
42    │  │  │  main.js
43    │  │  │  router.js
44    │  │  │  store.js
45    │  │  │
46    │  │  ├─components //业务组件
47    │  │  └─pages //此实例中的各个路由
48    │  │      ├─amenu
49    │  │      │      index.vue
50    │  │      │
51    │  │      └─bmenu
52    │  │              index.vue
53    │  │
54    │  └─login //另一个实例
55    │          index.js
56    │          index.vue
57    │          main.js
58    │
59    ├─scripts //包含各种常用配置，工具函数
60    │  │  map.js
61    │  │
62    │  └─utils
63    │          helper.js
64    │
65    ├─store //vuex仓库
66    │  │  index.js
67    │  │
68    │  ├─index
69    │  │      actions.js
70    │  │      getters.js
71    │  │      index.js
72    │  │      mutation-types.js
73    │  │      mutations.js
74    │  │      state.js
75    │  │
76    │  └─user
77    │          actions.js
78    │          getters.js
79    │          index.js
80    │          mutation-types.js
81    │          mutations.js
82    │          state.js
83    │
84    └─styles //样式统一配置
85        │  components.less
86        │
87        ├─animation
88        │      index.less
89        │      slide.less
90        │
91        ├─base
92        │      index.less
93        │      style.less
94        │      var.less
95        │      widget.less
96        │
97        └─common
98                index.less
99                reset.less
100                style.less
101                transition.less

小结

项目的目录结构很重要，因为目录结构能体现很多东西，怎么规划目录结构可能每个人有自己的理解，但是按照一定的规范去进行目录的设计，能让项目整个架构看起来更为简洁，更加易用