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

譯文啓發

原文：How to structure my Vue.js project

做者：Manu Ustenko

職位：Sennder GmbH 高級軟件工程師

Sennder：歐洲排名第一的全卡車裝載數字貨運代理平臺。

譯文博客連接：地址

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

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

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。

Services

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

本瓜以前也翻譯過這篇文章：Vue 魔法師 —— 將 API 「類化」

Static

一般來講，咱們不須要 Static 這個文件夾，但也能夠放一些 dummy data （虛擬數據）。

Router

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

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

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

以上！

撰文不易，點贊鼓勵。討論留言，攜手向前。★,°:.☆(￣▽￣)/$:.°★ 。

求一波關注，個人公衆號：【掘金安東尼】，牛年持續更新~