花五分鐘重新認知Vue項目src目錄
Vue 項目的目錄不就是 Vue CLI 嗎？讓本瓜帶你來康康作者是否還能變出什么花來？本文取其要，通譯之。
Vue CLI
認知一個項目從認識目錄開始！Vue 項目那逃不過認知最通用的 Vue CLI 目錄結(jié)構(gòu)。
如下（已顯示全部可選項）：
- --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
Vue CLI 目錄是非常標準的 Vue 項目結(jié)構(gòu)，但是它并不適用于中型或大型應(yīng)用。
原因是：我們應(yīng)該花更多的精力去關(guān)注 src 文件夾！具體往下看。
新 src 目錄
閑言少敘，改造后的目錄結(jié)構(gòu)：
- src
- --assets
- --common
- --layouts
- --middlewares
- --modules
- --plugins
- --router
- --services
- --static
- --store
- --views
讓咱們來一一揭曉為什么要設(shè)置這樣的目錄結(jié)構(gòu)！
Assets
靜態(tài)文件目錄：包含字體、圖標、圖片、樣式等靜態(tài)資源，不做贅述。
Common
公共文件夾：通常來說，它又能被拆分成多個子目錄：components、mixins、directives，又或者是單個的文件：functions.ts、helpers.ts、constants.ts、config.ts，亦或者其它。但它們有共同的特點：Common 文件夾下的文件都是在多出被引用的。
舉例：在 src/common/components 文件夾下，你可以設(shè)置 Button.vue 在全局共享的組件；在 helpers.ts 文件中寫公共方法以供多處調(diào)用。
Layouts
你可以在 Layouts 文件夾下放整個應(yīng)用的布局文件。比如 AppLayout.vue.，關(guān)于布局的更多問題可以見 這篇文章-Vue tricks: smart layouts for VueJS https://itnext.io/vue-tricks-smart-layouts-for-vuejs-5c61a472b69b
Middlewares
“中間件”這個文件夾有點類似 vue router，你可以在之下放置你的關(guān)于路由跳轉(zhuǎn)判斷文件。這里有個簡單的例子：
- export default function checkAuth(next, isAuthenticated) {
- if (isAuthenticated) {
- next('/')
- } else {
- next('/login');
- }
- }
在 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)
- });
此例意在做權(quán)限校驗。更多關(guān)于中間件的討論，在這篇文章-Vue tricks: smart router for VueJS
https://itnext.io/vue-tricks-smart-router-for-vuejs-93c287f46b50
Modules
Modules 文件夾是咱們應(yīng)用的核心！
此文件夾關(guān)于應(yīng)用的業(yè)務(wù)邏輯部分，它有以下類：
- 業(yè)務(wù)組件 components
- 測試單元 **tests**
- 數(shù)據(jù)持久 store
- 其它本業(yè)務(wù)相關(guān)的文件
這里有個很棒的例子：訂單業(yè)務(wù)模塊
- src
- --modules
- ----orders
- ------__tests__
- ------components
- --------OrdersList.vue
- --------OrderDetails.vue
- ------store
- --------actions.ts
- --------getters.ts
- --------mutations.ts
- --------state.ts
- ------helpers.ts
- ------types.ts
包括：測試文件、組件（訂單列表、訂單詳情）、Vuex 數(shù)據(jù)、相關(guān)文件。
它又像是一個小的 src 目錄~
Plugins
Plugins 文件夾當然是用來放 plugin。在 Vue2 中，我們這樣調(diào)用
- import MyPlugin from './myPlugin.ts'
- Vue.use(MyPlugin, { someOption: true })
在 Vue3 中，我們也可以在 main.ts 中調(diào)用，更多可見 v3-using-a-plugin
https://v3.vuejs.org/guide/plugins.html#using-a-plugin
Services
Services 文件夾是放請求庫和 API 的地方，也包括對 localStorage 的管理等。
Static
通常來說，我們不需要 Static 這個文件夾，但也可以放一些 dummy data （虛擬數(shù)據(jù)）。
Router
Router 文件夾放置你的路由文件，太過常見、無需贅述。你也可以根據(jù)需要只在根目錄設(shè)置 router.ts。但是更推薦你將路由進行一個劃分以便閱讀和擴展。vue-tricks-smart-router
https://itnext.io/vue-tricks-smart-router-for-vuejs-93c287f46b50
Store
Store 文件夾放置你的 Vuex 相關(guān)文件。在這個目錄下主要是一些全局的持久數(shù)據(jù)及方法：state 、 actions 、 mutations 、 getters，同時也和 modules 文件夾下的 Vuex 進行關(guān)聯(lián)。
Views
Views 文件夾是我們應(yīng)用中第二重要的文件夾了。我們都知道它包含的也是業(yè)務(wù)組件。但其實它更應(yīng)該是路由的一種映射，比如 /home /about /orders 這個路由，在 Views 文件夾下就應(yīng)該有 Home.vue、 About.vue 、Orders.vue 這三個文件！
你一定會問為什么要拆分業(yè)務(wù)部分為 Views 和 Modules 這兩個目錄，而不是像 Vue CLI 那樣放在一起？
有以下優(yōu)點：
- 更清晰的目錄結(jié)構(gòu)
- 更快速的了解路由
- 更直觀看到根文件、根頁面、以及它們與子組件、子業(yè)務(wù)是如何關(guān)聯(lián)的。
小結(jié)
作者從工作中針對 Vue 項目目錄結(jié)構(gòu)進行思考，然后給出建議，并不是要求咱完全套用，咱可汲取其思想，按需所用。
本瓜以為：在實際的項目中，Vue CLI 項目確實會造成 Views 目錄的龐大，所以將 Views 改造，分為 Views 和 Modules 目錄，前者是核心的頁面（參照路由），后者是具體的子業(yè)務(wù)及相關(guān)。這樣的建議確實是不錯的思路~
其實，又回到了那個問題：如果咱足夠了解業(yè)務(wù)，需求沒有頻繁的改動，目錄結(jié)構(gòu)應(yīng)該會是清晰的。但是沒辦法，再好的產(chǎn)品也避免不了來回改動。所以只能定期梳理、定期優(yōu)化了。認知目錄的過程也是對業(yè)務(wù)熟悉的過程。
