眾所周知，Vue.js是一個(gè)基于JavaScript的框架，在最近幾年中發(fā)展迅速。

這種增長(zhǎng)背后的原因很多，包括框架的簡(jiǎn)單性，易于集成，用戶友好性，較少的限制，這些原因已經(jīng)幫助Vue.js與Angular和React競(jìng)爭(zhēng)。實(shí)際上，Vue在許多方面似乎都與Angular和React相提并論。

[[339859]]

然而，當(dāng)我搜索Vue的局限性時(shí)，我注意到在每個(gè)結(jié)果中都出現(xiàn)了對(duì)大型項(xiàng)目缺乏支持的情況。了解VueJS后，我可以自信地說那不是事實(shí)。

因此，在本文中，我將討論5種最佳實(shí)踐，可用于組織大型Vue.js項(xiàng)目。

1. 使用Vue插槽使你的代碼易于理解

父子關(guān)系是組件之間相互連接的最常用方法之一，但這在某些情況下可能不是最佳選擇。想象一下，當(dāng)你在一個(gè)父組件中擁有大量的子組件時(shí)，你將不得不使用大量的 props 和 emit 事件來處理這些子組件，這將在短時(shí)間內(nèi)變得一團(tuán)糟。這正是你在大型項(xiàng)目中會(huì)面臨的情況，而Vue.js對(duì)這個(gè)問題也有一個(gè)很到位的解決方案。

Vue.js中使用了插槽(Slots)，以提供表示父子關(guān)系的另一種方法。插槽為你提供了將內(nèi)容放置在新位置的渠道。插槽的基本示例如下所示：

<div class="demo-content"> 
   <slot></slot> 
</div> 

當(dāng)上面的組件呈現(xiàn)出 標(biāo)簽時(shí)，將被demo-content替換。

你可以在Vue項(xiàng)目中使用多種不同類型的插槽。但是，你需要記住的最重要的事情是，插槽在增長(zhǎng)時(shí)會(huì)對(duì)你的項(xiàng)目產(chǎn)生巨大的影響，它使你可以在整個(gè)項(xiàng)目中維護(hù)良好的，易于理解的代碼。

2. 建立并共享獨(dú)立的組件

遵循F.I.R.S.T原則，將您的組件構(gòu)建為：專注，獨(dú)立，可重用，小型且可測(cè)試。你還可以使用Bit(Github)之類的工具獨(dú)立控制每個(gè)項(xiàng)目的組件，并將其共享給Bit的組件中心。

共享的組件與自動(dòng)生成的文檔和實(shí)時(shí)示例一起顯示在Bit的組件中心上。它們可以使用NPM進(jìn)行安裝或“克隆”并使用Bit進(jìn)行修改。這使得查找，使用和維護(hù)組件變得更加容易(因此，更易于維護(hù)項(xiàng)目)。

3. 維持一個(gè)井然有序的Vuex Store

Vuex是Vue.js中的狀態(tài)管理模式，它充當(dāng)應(yīng)用程序中所有組件的集中存儲(chǔ)。隨著時(shí)間的流逝，我看到有關(guān)Vuex Store的評(píng)論說：“ Vuex限制了開發(fā)人員根據(jù)需要構(gòu)造項(xiàng)目”。但事實(shí)是，Vuex幫助開發(fā)人員使用一套原則以一種更有組織的方式組織他們的項(xiàng)目。

在了解這些原理之前，您應(yīng)該了解Vuex store的4個(gè)主要組件。如果你熟悉這4個(gè)，則可以輕松地以更有條理的方式構(gòu)建Vuex store：

• States：用于保存您的應(yīng)用程序的數(shù)據(jù)
• Getters：用于訪問store外部的這些狀態(tài)對(duì)象。
• Mutations：用于修改狀態(tài)對(duì)象。
• Actions：用于提交突變。

假設(shè)你熟悉這四個(gè)組成部分，讓我們看看你需要遵循的原則。

• 你需要將應(yīng)用程序級(jí)狀態(tài)集中存儲(chǔ)在store中。
• 狀態(tài)應(yīng)該總是通過提交mutations而發(fā)生突變。
• 異步邏輯應(yīng)該被封裝，并且只能與Action一起使用。

如果你能遵循這3個(gè)原則，你的項(xiàng)目就可以順利地進(jìn)行結(jié)構(gòu)化，如果你覺得存儲(chǔ)文件越來越大，你可以完全自由地將它們分割成獨(dú)立的文件。示例項(xiàng)目結(jié)構(gòu)如下所示：

├── index.html 
├── main.js 
├── api 
├── components 
└── store 
    ├── index.js           
    ├── actions.js 
    ├── mutations.js 
    └── modules 

(1) 模塊化Vuex store

我們?cè)诒疚闹杏懻摰氖谴笮晚?xiàng)目，并且可以預(yù)期此類項(xiàng)目中的項(xiàng)目文件非常大而復(fù)雜。你需要以自己的方式管理store，并且需要避免store擁擠，因此，建議你以易于理解的方式對(duì)你的Vuex store進(jìn)行模塊化。在一個(gè)項(xiàng)目中，沒有確定的模塊分解方式，有的開發(fā)人員根據(jù)功能進(jìn)行模塊化，而有的開發(fā)人員則根據(jù)數(shù)據(jù)模型進(jìn)行模塊化。關(guān)于模塊化的最終決定完全取決于你，這將有助于你和你的團(tuán)隊(duì)的長(zhǎng)期發(fā)展。

store/ 
   ├── index.js    └── modules/       ├── module1.store.js       ├── module2.store.js       ├── module3.store.js       ├── module4.store.js       └── module5.store.js 

(2) 使用助手來簡(jiǎn)化你的代碼

在前面我提到了Vuex store中使用的4個(gè)組件。讓我們考慮一種情況，即你需要訪問這些states、getters，或者你需要調(diào)用組件中的action、mutations。在這種情況下，你不需要?jiǎng)?chuàng)建多個(gè)計(jì)算屬性或方法，你可以很容易地使用輔助方法(mapState、mapGetters、mapMutations 和 mapActions)來減少代碼。讓我們來看看這四個(gè)輔助工具：

1) mapState

如果我們需要在一個(gè)組件中調(diào)用多個(gè)store states屬性或getters，我們可以使用 mapState 幫助來生成一個(gè)獲取器函數(shù)，這將大大減少代碼行數(shù)。

import { mapState } from 'vuex' 
export default { 
  computed: mapState({ 
    count: state => state.count, 
    countAlias: 'count', 
    countPlusLocalState (state) {      return state.count + this.localCount 
    }  })} 

2) mapGetters

mapGetters 幫助程序可以用來將store getters映射到本地計(jì)算屬性。

import { mapGetters } from 'vuex' 
export default { 
  computed: {    ...mapGetters([      'count1', 
      'getter1', 
    ])  }} 

3) mapMutations

mapMutations 輔助函數(shù)可以用來提交組件中的mutations，并將組件方法映射到 store.commit 調(diào)用。同樣，我們也可以使用mapMutations傳遞有效載荷。

import { mapMutations } from 'vuex' 
export default { 
  methods: {    ...mapMutations({      cal: 'calculate' // map `this.cal()` to `this.$store.commit('calculate')` 
    })  }} 

4)mapActions

此幫助程序用于在組件中分派action，并將組件方法映射到 store.dispatch 調(diào)用。

import { mapActions } from 'vuex' 
export default { 
  methods: {    ...mapActions({      cal: 'calculate' // map `this.cal()` to `this.$store.dispatch('calculate')` 
    })  }} 

4. 別忘了編寫單元測(cè)試

測(cè)試是任何項(xiàng)目的另一個(gè)重要方面。作為開發(fā)人員，無論項(xiàng)目的重要性或規(guī)模如何，我們都必須測(cè)試開發(fā)的內(nèi)容。尤其是涉及大型項(xiàng)目時(shí)，有成千上萬的小型功能，因此我們有責(zé)任測(cè)試每個(gè)功能。單元測(cè)試在這種情況下生效，它使開發(fā)人員可以測(cè)試單個(gè)代碼單元。單元測(cè)試不僅可以避免錯(cuò)誤，而且每當(dāng)他們進(jìn)行更改時(shí)，它也可以提高開發(fā)團(tuán)隊(duì)對(duì)其工作的信心。當(dāng)項(xiàng)目隨著時(shí)間的增長(zhǎng)，開發(fā)者可以通過從一開始就遵循良好的單元測(cè)試機(jī)制來增加新的功能，而不用擔(dān)心會(huì)破壞另一個(gè)功能。

如果我們考慮在Vue.js中進(jìn)行單元測(cè)試，它幾乎與所有其他框架的單元測(cè)試方法相似，你可以很容易地在Vue.js中使用Jest、Karma或Mocha。盡管有測(cè)試框架，但是在編寫單元測(cè)試時(shí)，你需要記住的一些一般性事項(xiàng)。

• 測(cè)試必須提供明確的錯(cuò)誤消息ID(失敗)。
• 使用一個(gè)好的斷言庫(kù)。 (例如：在Jest框架中內(nèi)置了斷言庫(kù)，Chai庫(kù)與Mocha一起使用)
• 編寫單元測(cè)試以涵蓋每個(gè)Vue組件。

通過從項(xiàng)目開始就遵循這些步驟，你可以隨著項(xiàng)目結(jié)構(gòu)的增長(zhǎng)而大大減少花在調(diào)試和手動(dòng)測(cè)試上的時(shí)間。

除了單元測(cè)試之外，Vue.js與其他任何框架一樣都支持E2E測(cè)試和集成測(cè)試。因此，將這些也結(jié)合到你的項(xiàng)目中將是一個(gè)好習(xí)慣。通常，路由部分不會(huì)使用單元測(cè)試進(jìn)行測(cè)試，并且可以通過端到端測(cè)試進(jìn)行覆蓋。Vue store是最難測(cè)試的部分，推薦的方法是集成測(cè)試，因?yàn)閷?duì)狀態(tài)、動(dòng)作或獲取器的單獨(dú)測(cè)試被認(rèn)為是無用的。

總結(jié)

在經(jīng)歷了以上Vue.js的技術(shù)能力之后，我覺得Vue.js和其他框架一樣，已經(jīng)做好了大型項(xiàng)目的準(zhǔn)備，我們可以輕松地管理這些項(xiàng)目，而不會(huì)造成混亂。你們可能對(duì)這個(gè)問題也有不同的想法或不同的看法。所以，請(qǐng)?jiān)诨貜?fù)區(qū)與大家分享你的想法。干杯......!!