当开始一个新项目或重构一个现有项目时，经常会出现这样的问题：如何设置项目的目录结构?
平面结构
/project/src
├─ components
│ ├─ BaseButton.vue
│ ├─ BaseInput.vue
│ ├─ ...
│ ├─ TheFooter.vue
│ ├─ TheHeader.vue
│ └─ ...
├─ api
│ ├─ about.js
│ ├─ collect.js
│ └─ ...
├─ utils
│ ├─ common.js
│ ├─ format-data.js
│ └─ ...
└─ views
│ ├─ about.vue
│ ├─ collect.vue
│ └─ ...
└─ ...
大多数一般都是这样的结构，这个也没有什么毛病，文件少了还是挺方便的。那如果组件多了，我们该怎么找到我们的组件呢？
功能分组
当事情变得更复杂时，如果完全扁平的目录结构不再适合你，我们逐渐增加复杂度。
components文件中base组件是不是有多个，可以放到一个base文件夹
/project/src
├─ components
│ ├─ base
│ │ ├─ BaseButton.vue
│ │ ├─ BaseInput.vue
│ │ └─ ...
│ ├─ the
│ │ ├─ TheFooter.vue
│ │ ├─ TheHeader.vue
│ └─ ...
├─ api
│ ├─ about.js
│ ├─ collect.js
│ └─ ...
├─ utils
│ ├─ common.js
│ ├─ format-data.js
│ └─ ...
└─ views
│ ├─ about.vue
│ ├─ collect.vue
│ └─ ...
└─ ...
模块分组
这个这是组件，如果是views就不能根据功能分组可组了，我们可以根据模块进行分组。
例如：一个项目有前台collect，订单order，设置settings，等等，
是不是可以可以这样分组：
/my/project/src
├─ components
│ ├─ base
│ │ ├─ BaseButton.vue
│ │ ├─ BaseInput.vue
│ │ └─ ...
│ ├─ the
│ │ ├─ TheFooter.vue
│ │ ├─ TheHeader.vue
│ └─ ...
├─ api
│ ├─ about.js
│ ├─ collect.js
│ └─ ...
├─ utils
│ ├─ common.js
│ ├─ format-data.js
│ └─ ...
└─ views
│ ├─ collect
│ │ ├─ index.vue
│ │ ├─ goods-list.vue
│ │ └─ ...
│ ├─ order
│ │ ├─ index.vue
│ │ ├─ order-list.vue
│ │ └─ ...
│ └─ ...
└─ ...
这样是不是看起来清晰好多，别急我们继续进行拆分。
模块域分组
随着项目越来越复杂，我们相对性的添加了api, store等等功能，每个都有对应的模块。
先来看下目前的目录
/project/src
├─ components
├─ api
│ ├─ collect.js
│ ├─ order.js
│ └─ ...
├─ store
│ ├─ collect.js
│ ├─ order.js
│ └─ ...
└─ views
│ ├─ collect
│ │ ├─ index.vue
│ │ ├─ goods-list.vue
│ │ └─ ...
│ ├─ order
│ │ ├─ index.vue
│ │ ├─ order-list.vue
│ │ └─ ...
│ └─ ...
└─ ...
现在有这样一个需求，我们添加一个collect接口，是不是要找到api文件夹下的collet.js添加，这样来回切换，如果太多模块了就不好定位了。我们可以单独的一个模块做成域，把模块下的用到的都放到一个模块域中，可这样拆分：
/project/src
├─ components
├─ store
│ ├─ index,js
│ └─ ...
└─ views
│ ├─ collect
│ │ ├─ index.vue
│ │ ├─ goods-list.vue
│ │ ├─ api
│ │ │ └─ collect.js
│ │ │ └─ index.js
│ │ ├─ store
│ │ │ └─ index.js
│ │ ├─ router
│ │ │ └─ index.js
│ │ └─ ...
│ │ └─ ...
│ ├─ order
│ │ ├─ index.vue
│ │ ├─ order-list.vue
│ │ └─ ...
│ └─ ...
└─ ...
我们把api，store,router都放到对应的模块下，对应模块的内容，就在对象模块进行操作，这样是不是更清晰明了😄。
/src/store/src/rotuer- ...
模块做设置以及公用的处理，这样我们可以做一个自动引入，也是很方便。
模块组件分组
随着项目的不断增大，相应的模块也不断增大，又逐渐回到原点，我们该怎么避免呢？
1. 功能拆分
我们实现下colelct的模块，例如：
前台有header, contain, footer等等
我们每一个功能一个组，如果有更复杂的可以进一步拆分。
/project/src/views
└─ views
│ ├─ collect
│ │ ├─ index.vue
│ │ ├─ header
│ │ │ └─ index.vue
│ │ ├─ contain
│ │ │ └─ index.vue
│ │ ├─ footer
│ │ │ └─ index.vue
│ │ ├─ api
│ │ ├─ store
│ │ ├─ router
│ │ └─ ...
│ │ └─ ...
│ ├─ order
└─ ...
2. 逻辑拆分
这要归功于vue3强大的组合式API，可以任意组合拆分。
我的建议：逻辑和功能独立的都可以拆出去，这样的如果项目复杂了，我们在添加或者改逻辑的时候，可以更好的定位问题，就是有问题也不会影响到其他的逻辑。
举个例子：
前台有这样一个购物车功能，有商品列表，添加商品，取单挂单以及结算操作，我们可以简单的拆分
/project/src/views
└─ views
│ ├─ collect
│ │ ├─ index.vue
│ │ ├─ commodity
│ │ │ └─ index.vue
│ │ │ └─ useAddHandle.js
│ │ │ └─ useTakePendingOrder.js
│ │ │ └─ useSettlement.js
│ │ └─ ...
│ ├─ order
└─ ...
这里只是简单的举个例子🌰，具体的逻辑要看具体的需求决定是否要拆分。
总结
拆分是让我们的结构更清晰，更方便我们开发和修改，我们不能为了拆分而拆分，如果拆完更复杂了就得不偿失了。
项目开发不是一蹴而就的，是不断重构的过程，不管怎样选择适合我们的，才是对的。
以上只是建议，不足之处多多指教。
