誰說Vue.js不適應于大型項目？4個優秀實踐你遵循了嗎
眾所周知，Vue.js是一個基于JavaScript的框架，在最近幾年中發展迅速。
這種增長背后的原因很多，包括框架的簡單性，易于集成，用戶友好性，較少的限制，這些原因已經幫助Vue.js與Angular和React競爭。實際上，Vue在許多方面似乎都與Angular和React相提并論。
然而，當我搜索Vue的局限性時，我注意到在每個結果中都出現了對大型項目缺乏支持的情況。了解VueJS后，我可以自信地說那不是事實。
因此，在本文中，我將討論5種最佳實踐，可用于組織大型Vue.js項目。
1. 使用Vue插槽使你的代碼易于理解
父子關系是組件之間相互連接的最常用方法之一，但這在某些情況下可能不是最佳選擇。想象一下，當你在一個父組件中擁有大量的子組件時，你將不得不使用大量的 props 和 emit 事件來處理這些子組件，這將在短時間內變得一團糟。這正是你在大型項目中會面臨的情況，而Vue.js對這個問題也有一個很到位的解決方案。
Vue.js中使用了插槽(Slots)，以提供表示父子關系的另一種方法。插槽為你提供了將內容放置在新位置的渠道。插槽的基本示例如下所示：
- <div class="demo-content">
- <slot></slot>
- </div>
當上面的組件呈現出
你可以在Vue項目中使用多種不同類型的插槽。但是，你需要記住的最重要的事情是，插槽在增長時會對你的項目產生巨大的影響，它使你可以在整個項目中維護良好的，易于理解的代碼。
2. 建立并共享獨立的組件
遵循F.I.R.S.T原則，將您的組件構建為：專注，獨立，可重用，小型且可測試。你還可以使用Bit(Github)之類的工具獨立控制每個項目的組件，并將其共享給Bit的組件中心。
共享的組件與自動生成的文檔和實時示例一起顯示在Bit的組件中心上。它們可以使用NPM進行安裝或“克隆”并使用Bit進行修改。這使得查找，使用和維護組件變得更加容易(因此，更易于維護項目)。
3. 維持一個井然有序的Vuex Store
Vuex是Vue.js中的狀態管理模式，它充當應用程序中所有組件的集中存儲。隨著時間的流逝，我看到有關Vuex Store的評論說：“ Vuex限制了開發人員根據需要構造項目”。但事實是，Vuex幫助開發人員使用一套原則以一種更有組織的方式組織他們的項目。
在了解這些原理之前，您應該了解Vuex store的4個主要組件。如果你熟悉這4個，則可以輕松地以更有條理的方式構建Vuex store：
- States：用于保存您的應用程序的數據
- Getters：用于訪問store外部的這些狀態對象。
- Mutations：用于修改狀態對象。
- Actions：用于提交突變。
假設你熟悉這四個組成部分，讓我們看看你需要遵循的原則。
- 你需要將應用程序級狀態集中存儲在store中。
- 狀態應該總是通過提交mutations而發生突變。
- 異步邏輯應該被封裝，并且只能與Action一起使用。
如果你能遵循這3個原則，你的項目就可以順利地進行結構化，如果你覺得存儲文件越來越大，你可以完全自由地將它們分割成獨立的文件。示例項目結構如下所示：
- ├── index.html
- ├── main.js
- ├── api
- ├── components
- └── store
- ├── index.js
- ├── actions.js
- ├── mutations.js
- └── modules
(1) 模塊化Vuex store
我們在本文中討論的是大型項目，并且可以預期此類項目中的項目文件非常大而復雜。你需要以自己的方式管理store，并且需要避免store擁擠，因此，建議你以易于理解的方式對你的Vuex store進行模塊化。在一個項目中，沒有確定的模塊分解方式，有的開發人員根據功能進行模塊化，而有的開發人員則根據數據模型進行模塊化。關于模塊化的最終決定完全取決于你，這將有助于你和你的團隊的長期發展。
- store/
- ├── index.js └── modules/ ├── module1.store.js ├── module2.store.js ├── module3.store.js ├── module4.store.js └── module5.store.js
(2) 使用助手來簡化你的代碼
在前面我提到了Vuex store中使用的4個組件。讓我們考慮一種情況，即你需要訪問這些states、getters，或者你需要調用組件中的action、mutations。在這種情況下，你不需要創建多個計算屬性或方法，你可以很容易地使用輔助方法(mapState、mapGetters、mapMutations 和 mapActions)來減少代碼。讓我們來看看這四個輔助工具：
1) mapState
如果我們需要在一個組件中調用多個store states屬性或getters，我們可以使用 mapState 幫助來生成一個獲取器函數，這將大大減少代碼行數。
- 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映射到本地計算屬性。
- import { mapGetters } from 'vuex'
- export default {
- computed: { ...mapGetters([ 'count1',
- 'getter1',
- ]) }}
3) mapMutations
mapMutations 輔助函數可以用來提交組件中的mutations，并將組件方法映射到 store.commit 調用。同樣，我們也可以使用mapMutations傳遞有效載荷。
- import { mapMutations } from 'vuex'
- export default {
- methods: { ...mapMutations({ cal: 'calculate' // map `this.cal()` to `this.$store.commit('calculate')`
- }) }}
4)mapActions
此幫助程序用于在組件中分派action，并將組件方法映射到 store.dispatch 調用。
- import { mapActions } from 'vuex'
- export default {
- methods: { ...mapActions({ cal: 'calculate' // map `this.cal()` to `this.$store.dispatch('calculate')`
- }) }}
4. 別忘了編寫單元測試
測試是任何項目的另一個重要方面。作為開發人員，無論項目的重要性或規模如何，我們都必須測試開發的內容。尤其是涉及大型項目時，有成千上萬的小型功能，因此我們有責任測試每個功能。單元測試在這種情況下生效，它使開發人員可以測試單個代碼單元。單元測試不僅可以避免錯誤，而且每當他們進行更改時，它也可以提高開發團隊對其工作的信心。當項目隨著時間的增長，開發者可以通過從一開始就遵循良好的單元測試機制來增加新的功能，而不用擔心會破壞另一個功能。
如果我們考慮在Vue.js中進行單元測試，它幾乎與所有其他框架的單元測試方法相似，你可以很容易地在Vue.js中使用Jest、Karma或Mocha。盡管有測試框架，但是在編寫單元測試時，你需要記住的一些一般性事項。
- 測試必須提供明確的錯誤消息ID(失敗)。
- 使用一個好的斷言庫。 (例如：在Jest框架中內置了斷言庫，Chai庫與Mocha一起使用)
- 編寫單元測試以涵蓋每個Vue組件。
通過從項目開始就遵循這些步驟，你可以隨著項目結構的增長而大大減少花在調試和手動測試上的時間。
除了單元測試之外，Vue.js與其他任何框架一樣都支持E2E測試和集成測試。因此，將這些也結合到你的項目中將是一個好習慣。通常，路由部分不會使用單元測試進行測試，并且可以通過端到端測試進行覆蓋。Vue store是最難測試的部分，推薦的方法是集成測試，因為對狀態、動作或獲取器的單獨測試被認為是無用的。
總結
在經歷了以上Vue.js的技術能力之后，我覺得Vue.js和其他框架一樣，已經做好了大型項目的準備，我們可以輕松地管理這些項目，而不會造成混亂。你們可能對這個問題也有不同的想法或不同的看法。所以，請在回復區與大家分享你的想法。干杯......!!
