说下你的vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？ - 图1

一、为什么要划分

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

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

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

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

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

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

单一入口/出口

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

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

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

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

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

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

举个例子

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

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

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

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

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

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

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

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

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

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

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

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

二、目录结构

单页面目录结构

  1. project
  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

多页面目录结构

  1. my-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

小结

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

参考文献