花五分钟重新认知 Vue 项目 src 目录
# 译文启发
原文：How to structure my Vue.js project (opens new window)
作者：Manu Ustenko (opens new window)
职位：Sennder GmbH 高级软件工程师
Sennder：欧洲排名第一的全卡车装载数字货运代理平台。
Vue 项目的目录不就是 Vue CLI 吗？让本瓜带你来康康作者是否还能变出什么花来？本文取其要，通译之。
本文首发在我的博客：地址 (opens new window)
# Vue CLI
认知一个项目从认识目录开始！Vue 项目那逃不过认知最通用的 Vue CLI 目录结构。
如下（已显示全部可选项）：
--public
----img
------icons
----favicon.ico
----index.html
----robots.txt
--src
----assets
------logo.png
----components
------HelloWorld.vue
----router
------index.ts
----store
------index.ts
----views
------About.vue
------Home.vue
----App.vue
----main.ts
----registerServiceWorkers.ts
----shims-vue.d.ts
--tests
----e2e
----unit
--.browserslistrc
--.eslintrc.js
--.gitignore
--babel.config.js
--cypress.json
--jest.config.js
--package.json
--package-lock.json
--README.md
--tsconfig.json
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
作者这里给了重要的一句结论：
Vue CLI 目录是非常标准的 Vue 项目结构，但是它并不适用于中型或大型应用。
原因是：我们应该花更多的精力去关注 src 文件夹！
# 新 src 目录
闲言少叙，改造后的目录结构展示：
src
--assets
--common
--layouts
--middlewares
--modules
--plugins
--router
--services
--static
--store
--views
2
3
4
5
6
7
8
9
10
11
12
让咱们来一一揭晓为什么要设置这样的目录结构！
# Assets
静态文件目录：包含字体、图标、图片、样式等静态资源，不做赘述。
# Common
公共文件夹：通常来说，它又能被拆分成多个子目录：components、mixins、directives，又或者是单个的文件：functions.ts、helpers.ts、constants.ts、config.ts，亦或者其它。但它们有共同的特点：Common 文件夹下的文件都是在多出被引用的。
举例：在 src/common/components 文件夹下，你可以设置 Button.vue 在全局共享的组件；在 helpers.ts 文件中写公共方法以供多处调用。
# Layouts
你可以在 Layouts 文件夹下放整个应用的布局文件。比如 AppLayout.vue.，关于布局的更多问题可以见这篇文章-Vue tricks: smart layouts for VueJS (opens new window)
# Middlewares
“中间件”这个文件夹有点类似 vue router，你可以在之下放置你的关于路由跳转判断文件。这里有个简单的例子：
export default function checkAuth(next, isAuthenticated) {
if (isAuthenticated) {
next('/')
} else {
next('/login');
}
}
2
3
4
5
6
7
在 vue-router 中这样使用
import Router from 'vue-router'
import checkAuth from '../middlewares/checkAuth.js'
const isAuthenticated = true
const router = new Router({
routes: [],
mode: 'history'
})
router.beforeEach((to, from, next) => {
checkAuth(next, isAuthenticated)
});
2
3
4
5
6
7
8
9
10
此例意在做权限校验。更多关于中间件的讨论，在这篇文章-Vue tricks: smart router for VueJS (opens new window)
# Modules
Modules 文件夹是咱们应用的核心！
此文件夹关于应用的业务逻辑部分，它有以下类：
- 业务组件
components - 测试单元
tests - 数据持久
store - 其它本业务相关的文件
这里有个很棒的例子：订单业务模块
src
--modules
----orders
------__tests__
------components
--------OrdersList.vue
--------OrderDetails.vue
------store
--------actions.ts
--------getters.ts
--------mutations.ts
--------state.ts
------helpers.ts
------types.ts
2
3
4
5
6
7
8
9
10
11
12
13
14
包括：测试文件、组件（订单列表、订单详情）、Vuex 数据、相关文件。
它又像是一个小的 src 目录~
# Plugins
Plugins 文件夹当然是用来放 plugin。在 Vue2 中，我们这样调用
import MyPlugin from './myPlugin.ts'
Vue.use(MyPlugin, { someOption: true })
2
在 Vue3 中，我们也可以在 main.ts 中调用，更多可见 v3-using-a-plugin (opens new window)。
# Services
Services 文件夹是放请求库和 API 的地方，也包括对 localStorage 的管理等。
本瓜之前也翻译过这篇文章：Vue 魔法师 —— 将 API “类化” (opens new window)
# Static
通常来说，我们不需要 Static 这个文件夹，但也可以放一些 dummy data （虚拟数据）。
# Router
Router 文件夹放置你的路由文件，太过常见、无需赘述。你也可以根据需要只在根目录设置 router.ts。但是更推荐你将路由进行一个划分以便阅读和扩展。vue-tricks-smart-router (opens new window)
# Store
Store 文件夹放置你的 Vuex 相关文件。在这个目录下主要是一些全局的持久数据及方法：state 、 actions 、 mutations 、 getters，同时也和 modules 文件夹下的 Vuex 进行关联。
# Views
Views 文件夹是我们应用中第二重要的文件夹了。我们都知道它包含的也是业务组件。但其实它更应该是路由的一种映射，比如 /home /about /orders 这个路由，在 Views 文件夹下就应该有 Home.vue、 About.vue 、Orders.vue 这三个文件！
你一定会问为什么要拆分业务部分为 Views 和 Modules 这两个目录，而不是像 Vue CLI 那样放在一起？
有以下优点：
- 更清晰的目录结构
- 更快速的了解路由
- 更直观看到根文件、根页面、以及它们与子组件、子业务是如何关联的。
# 小结
作者从工作中针对 Vue 项目目录结构进行思考，然后给出建议，并不是要求咱完全套用，咱可汲取其思想，按需所用。
本瓜以为：在实际的项目中，Vue CLI 项目确实会造成 Views 目录的庞大，所以将 Views 改造，分为 Views 和 Modules 目录，前者是核心的页面（参照路由），后者是具体的子业务及相关。这样的建议确实是不错的思路~
其实，又回到了那个问题：如果咱足够了解业务，需求没有频繁的改动，目录结构应该会是清晰的。但是没办法，再好的产品也避免不了来回改动。所以只能定期梳理、定期优化了。认知目录的过程也是对业务熟悉的过程。
以上！
撰文不易，点赞鼓励。讨论留言，携手向前。★,°:.☆(￣▽￣)/$:.°★ 。
求一波关注，我的公众号：【掘金安东尼】，牛年持续更新~
