花五分鐘重新認知Vue項目src目錄

作者：佚名 2021-03-24 10:58:08

Vue 項目的目錄不就是 Vue CLI 嗎？讓本瓜帶你來康康作者是否還能變出什么花來？本文取其要，通譯之。

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

Vue CLI 目錄是非常標準的 Vue 項目結構，但是它并不適用于中型或大型應用。

原因是：我們應該花更多的精力去關注 src 文件夾！具體往下看。

新 src 目錄

閑言少敘，改造后的目錄結構：

src  
--assets  
--common  
--layouts  
--middlewares  
--modules  
--plugins  
--router  
--services  
--static  
--store  
--views

讓咱們來一一揭曉為什么要設置這樣的目錄結構！

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 https://itnext.io/vue-tricks-smart-layouts-for-vuejs-5c61a472b69b

Middlewares

“中間件”這個文件夾有點類似 vue router，你可以在之下放置你的關于路由跳轉判斷文件。這里有個簡單的例子：

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)  
});

此例意在做權限校驗。更多關于中間件的討論，在這篇文章-Vue tricks: smart router for VueJS

https://itnext.io/vue-tricks-smart-router-for-vuejs-93c287f46b50

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

包括：測試文件、組件（訂單列表、訂單詳情）、Vuex 數據、相關文件。

它又像是一個小的 src 目錄~

Plugins

Plugins 文件夾當然是用來放 plugin。在 Vue2 中，我們這樣調用

import MyPlugin from './myPlugin.ts'  
Vue.use(MyPlugin, { someOption: true })

在 Vue3 中，我們也可以在 main.ts 中調用，更多可見 v3-using-a-plugin

https://v3.vuejs.org/guide/plugins.html#using-a-plugin

Services

Services 文件夾是放請求庫和 API 的地方，也包括對 localStorage 的管理等。

Static

通常來說，我們不需要 Static 這個文件夾，但也可以放一些 dummy data （虛擬數據）。

Router

Router 文件夾放置你的路由文件，太過常見、無需贅述。你也可以根據需要只在根目錄設置 router.ts。但是更推薦你將路由進行一個劃分以便閱讀和擴展。vue-tricks-smart-router

https://itnext.io/vue-tricks-smart-router-for-vuejs-93c287f46b50

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 目錄，前者是核心的頁面（參照路由），后者是具體的子業務及相關。這樣的建議確實是不錯的思路~

其實，又回到了那個問題：如果咱足夠了解業務，需求沒有頻繁的改動，目錄結構應該會是清晰的。但是沒辦法，再好的產品也避免不了來回改動。所以只能定期梳理、定期優化了。認知目錄的過程也是對業務熟悉的過程。

責任編輯：龐桂玉來源：前端大全