面试官：说下你的vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？...

迈不过友情╰ 2023-01-01 07:50 262阅读 0赞

![format_png][]

## 一、为什么要划分 ##

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

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

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

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

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

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

### 单一入口/出口 ###

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

// 错误用法
    import sellerReducer from 'src/pages/seller/reducer'
    
    // 正确用法
    import { reducer as sellerReducer } from 'src/pages/seller'

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

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

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

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

举个例子

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

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

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

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

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

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

// 错误用法
    import Input from '../../components/input'
    // 正确用法
    import Input from 'src/components/input'

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

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

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

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

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

## 二、目录结构 ##

单页面目录结构

多页面目录结构

my-vue-test:.
    │  .browserslistrc
    │  .env.production
    │  .eslintrc.js
    │  .gitignore
    │  babel.config.js
    │  package-lock.json
    │  package.json
    │  README.md
    │  vue.config.js
    │  yarn-error.log
    │  yarn.lock
    │
    ├─public
    │      favicon.ico
    │      index.html
    │
    └─src
        ├─apis //接口文件根据页面或实例模块化
        │      index.js
        │      login.js
        │
        ├─components //全局公共组件
        │  └─header
        │          index.less
        │          index.vue
        │
        ├─config //配置（环境变量配置不同passid等）
        │      env.js
        │      index.js
        │
        ├─contant //常量
        │      index.js
        │
        ├─images //图片
        │      logo.png
        │
        ├─pages //多页面vue项目，不同的实例
        │  ├─index //主实例
        │  │  │  index.js
        │  │  │  index.vue
        │  │  │  main.js
        │  │  │  router.js
        │  │  │  store.js
        │  │  │
        │  │  ├─components //业务组件
        │  │  └─pages //此实例中的各个路由
        │  │      ├─amenu
        │  │      │      index.vue
        │  │      │
        │  │      └─bmenu
        │  │              index.vue
        │  │
        │  └─login //另一个实例
        │          index.js
        │          index.vue
        │          main.js
        │
        ├─scripts //包含各种常用配置，工具函数
        │  │  map.js
        │  │
        │  └─utils
        │          helper.js
        │
        ├─store //vuex仓库
        │  │  index.js
        │  │
        │  ├─index
        │  │      actions.js
        │  │      getters.js
        │  │      index.js
        │  │      mutation-types.js
        │  │      mutations.js
        │  │      state.js
        │  │
        │  └─user
        │          actions.js
        │          getters.js
        │          index.js
        │          mutation-types.js
        │          mutations.js
        │          state.js
        │
        └─styles //样式统一配置
            │  components.less
            │
            ├─animation
            │      index.less
            │      slide.less
            │
            ├─base
            │      index.less
            │      style.less
            │      var.less
            │      widget.less
            │
            └─common
                    index.less
                    reset.less
                    style.less
                    transition.less

### 小结 ###

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

## 参考文献 ##

*  https://juejin.cn/post/6844904129186234381\#heading-0
 *  https://zhuanlan.zhihu.com/p/89693668

面试官VUE系列总进度：27／33

[面试官：Vue常用的修饰符有哪些?有什么应用场景?][Vue]

[面试官：你有写过自定义指令吗？自定义指令的应用场景有哪些？][Link 1]

[面试官：什么是虚拟DOM？如何实现一个虚拟DOM？][DOM_DOM]

[面试官：了解过vue中的diff算法吗？说说看][vue_diff]

[面试官：Vue项目中有封装过axios吗？怎么封装的？][Vue_axios]

[面试官：你了解Axios的原理吗？有看过它的源码吗？][Axios]

[面试官：SSR解决了什么问题？有做过SSR吗？你是怎么做的？][SSR_SSR]

篇副有限，扫下方二维码查看往期

![format_png 1][]

[format_png]: /images/20221120/8ff0a7d1055e429b8232d0693998cd20.png
[Vue]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c663cb674f756a3f270d8e017dd7a773a5933afa35f11356fe42b67afe836003207851d6&idx=1&mid=2247484469&scene=21&sn=921d55282359ac4a16c077bbe5946628#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c614cb674f02345c0fbb44bc26dcacead59259d8a539fcbba4581d8e94783e9c5ac06b7d&idx=1&mid=2247484482&scene=21&sn=9558721c92f56261200fcee26d86dbe1#wechat_redirect
[DOM_DOM]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c632cb674f2484fdf914d76fba55afcefca3b5adcbe6cf4b0c7fd36e29d0292e8cefceb5&idx=1&mid=2247484516&scene=21&sn=965a4ce32bf93adb9ed112922c5cb8f5#wechat_redirect
[vue_diff]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c623cb674f35ef6e46d8a2aa70d524ee3a4ae005bf6e77008c3ce2510dcdb4d7bbde2667&idx=1&mid=2247484533&scene=21&sn=0b21d608fa46145c5118e22fc33a5bcf#wechat_redirect
[Vue_axios]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c6decb674fc8aed35ee8254fe7f8cfc398648fa643039b29e3f6dda7caf17ff83df2f28a&idx=1&mid=2247484552&scene=21&sn=e847305e8330a6817e8800820774e78b#wechat_redirect
[Axios]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c6f4cb674fe2c90b960392c402fa2452e62bcdf0a703a9ad56d454e7643dfd2b44e38391&idx=1&mid=2247484578&scene=21&sn=52ea1909abe13d6d7764384455b2e925#wechat_redirect
[SSR_SSR]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c6ebcb674ffd46b20d29b32f156e7cb8acb2c54ade0ed206b7ed887f6474a55849858ad4&idx=1&mid=2247484605&scene=21&sn=92e2e45cbba021fe685f0f8252ffe8b4#wechat_redirect
[format_png 1]: /images/20221120/6c78ffde9092426186120e849f1f8cda.png