全文共3777字，預計學習時長10分鐘
作為基於JavaScript的框架，Vue.js最近幾年中發展迅速，原因很多，包括框架的簡單性、易於集成性、用戶友好性以及限制較少等等，這些特性也幫助Vue.js在與Angular和React競爭時有一戰之力。
但在搜索Vue的局限性時，我發現很多人都提到了它對大型項目缺乏支持這一現象。不過在深入了解之後，我可以自信地說並非如此。因此，本文將討論4種可用於組織大型Vue.js項目的最佳實踐。
1.使用Vue Slots使代碼易於理解
父子關係是組件之間相互連接的最常用方法之一，但有時這可能並不是最佳選擇。想像一下，如果出現在單個父組件中有大量子組件的情況，那麼可能就不得不使用大量道具和發出事件來處理這些子組件，很快一切會變得一團糟。
這就是在大型項目中將要面臨的真實情況，不過，Vue.js可以提供針對此問題的現場解決方案。
我們可以在Vue.js中使用slots來提供表示父子關係的另一種方法，slots提供了將內容放置在新位置的渠道。slots的基本操作示例如下所示：
<div>
<slot></slot>
</div>
當上面的組件呈現的<slot> </ slot>標籤將被demo-content替換時：
<demo-content>
<h2>Hi!</h2>
<class-name name="Welcome toVue!"></class-name>
</demo-content>
你可以在Vue項目中使用多種不同類型的slots。但最重要的一點是，當slots在增多時，項目也會隨之受到巨大的影響，slots可以使得整個項目中的代碼維持完整且易於理解。
2.建立並共享獨立的組件
AddyOsmani：「有效構建『大型'事物的秘訣通常是避免從一開始就抱著直接構建大型事物的想法。相反，可以用更小、更集中的作品來構成大型事物。這樣一來，就更容易看到小的事物是如何組成大的事物的了。」
你可以遵循F.I.R.S.T原則，將自己的組件構建為：專注的、獨立的、可重複使用的以及小型且可測試的。
還可以使用Bit（Github）之類的工具對每個項目的組件進行獨立式原始碼管理，並將其共享給Bit的組件中心。共享的組件、自動生成的文檔和實時示例將一起顯示在Bit的組件中心上。可以使用NPM進行安裝或使用Bit對其進行「克隆」和修改，這會使查找、使用和維護組件變得更加容易（因此，也更易於維護項目）。
3.維護良好的VUEX倉庫
Vuex是Vue.js中的狀態管理模式，它負責應用程式中所有組件的集中存儲功能。我看到有些評論說：「Vuex限制了開發人員根據需要構造項目」。但事實是，Vuex可以通過使用一組原則來幫助開發人員以更有條理的方式組織他們的項目。
在了解這些原理之前，首先應該先了解以下4個Vuex倉庫中的主要組件：
· States：用於保存應用程式的數據
· Getters：用於訪問倉庫外部的狀態對象
· Mutations：用於修改狀態對象
· Actions：用於處理mutations
那麼接下來看看需要遵循的原則：
· 需要將應用程式級別狀態集中在倉庫中。
· states應始終通過處理mutations來進行改變。
· 異步邏輯應該被封裝，並且只能與actions一起使用。
遵循這三個原則，項目就可以被順利地組織出來，並且如果你覺得存儲文件越來越大，可以將它們拆分成單獨的文件。示例項目結構如下所示：
├── index.html
├── main.js
├── api
├── components
└── store
├── index.js
├── actions.js
├── mutations.js
└── modules
模塊化VUEX倉庫
本文中討論的是大型項目，此類項目中的項目文件會非常大而複雜。你需要以自己的方式管理倉庫，並且需要避免商店倉庫，因此最好以易於他人理解的方式對Vuex倉庫進行模塊化。
在此我們沒有定義項目中模塊的定義方法，有些開發人員會根據功能進行模塊化，有些則根據數據模型進行模塊化。關於模塊化的最終決定完全取決於你自己，這將對個人和團隊有長期幫助。
store/
├── index.js
└── modules/
├── module1.store.js
├── module2.store.js
├── module3.store.js
├── module4.store.js
└── module5.store.js
使用助手來簡化代碼
前文提到了Vuex倉庫中使用的4個組件。假設如果出現需要訪問這些states、getters或需要調用actions或組件中的mutations的情況，那麼無需創建多個計算屬性或方法，就可以輕鬆使用輔助方法（mapState, mapGetters, mapMutations 和 mapActions）來減少代碼。
來看看這四個輔助工具：
· mapState
如果需要在一個組件中調用多個存儲狀態屬性或getters，就可以使用mapState幫助生成一個getter函數，這將大大減少代碼行的數量。
import { mapState } from 'vuex'export default {
computed: mapState({
count: state => state.count,
countAlias: 'count',
countPlusLocalState (state) {
return state.count +this.localCount
}
})
}
· mapGetters
mapGetters可幫助將倉庫getters映射到本地計算屬性。
import { mapGetters } from 'vuex'export default {
computed: {
...mapGetters([
'count1',
'getter1',
])
}
}
· mapMutations
mapMutations可以用於幫助提交組件中的mutations，它將組件方法映射到store.commit調用。同樣，也可以使用mapMutations傳遞有效載荷。
import { mapMutations } from 'vuex'export default {
methods: {
...mapMutations({
cal: 'calculate' // map`this.cal()` to `this.$store.commit('calculate')`
})
}
}
· mapActions
可以用於幫助在組件中分派操作，並將組件方法映射到store.dispatch調用。
import { mapActions } from 'vuex'export default {
methods: {
...mapActions({
cal: 'calculate' // map`this.cal()` to `this.$store.dispatch('calculate')`
})
}
}
4.不要忘記編寫單元測試
測試在任何項目中都很重要。作為開發人員，無論項目的重要性或規模如何，我們都必須測試開發的內容。尤其是在涉及大型項目中，往往有成千上萬的小型功能，因此我們有責任測試每個功能。
這就是單元測試的必要性，它可以使開發人員測試單個代碼單元。單元測試不僅可以避免錯誤，而且每當開發人員進行更改時，修改的結果也可以提升開發團隊對其工作的信心。隨著項目的進行，開發人員可以從項目的開始就遵循良好的單元測試機制來添加新功能，不必擔心會破壞其他功能。
在Vue.js中進行的單元測試與所有其他框架的單元測試方法大同小異，你可以輕鬆地將Jest，Karma或Mocha與Vue.js結合使用。儘管有測試框架，但是在編寫單元測試時，還是有些需要記住的一般性事項：
· 編寫單元測試以涵蓋每個Vue組件。
· 測試必須提供清晰的失敗錯誤消息ID。
· 使用良好的斷言庫。例如：在Jest框架中內置了斷言庫，Chai斷言庫與Mocha一起使用。
通過從項目開始就遵循這些步驟的方法，隨著項目結構的發展，開發人員可以大大減少調試和手動測試所花費的時間。
除了單元測試之外，Vue.js與其他任何框架一樣都支持E2E測試和集成測試。因此，你也可以將這些也結合到項目中。通常，路由部分不會使用單元測試進行測試，並且通過端到端測試進行覆蓋。Vue倉庫是最難測試的部分，對states，actions或getters的單獨測試往往被認為是無用的，我推薦的方法是集成測試。
看看這優秀的技術能力，我認為Vue.js用於大規模項目完全沒問題，它可以輕鬆地管理這些項目而不會造成混亂。
留言點讚關注
我們一起分享AI學習與發展的乾貨
如轉載，請後臺留言，遵守轉載規範