Vue.js項(xiàng)目實(shí)踐的方法教程

這篇文章主要介紹“Vue.js項(xiàng)目實(shí)踐的方法教程”，在日常操作中，相信很多人在Vue.js項(xiàng)目實(shí)踐的方法教程問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Vue.js項(xiàng)目實(shí)踐的方法教程”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

1. 使用Vue Slots使代碼易于理解

父子關(guān)系是組件之間相互連接的最常用方法之一，但有時(shí)這可能并不是最佳選擇。想象一下，如果出現(xiàn)在單個(gè)父組件中有大量子組件的情況，那么可能就不得不使用大量道具和發(fā)出事件來(lái)處理這些子組件，很快一切會(huì)變得一團(tuán)糟。

這就是在大型項(xiàng)目中將要面臨的真實(shí)情況，不過(guò)，Vue.js可以提供針對(duì)此問(wèn)題的現(xiàn)場(chǎng)解決方案。

我們可以在Vue.js中使用slots來(lái)提供表示父子關(guān)系的另一種方法，slots提供了將內(nèi)容放置在新位置的渠道。slots的基本操作示例如下所示：

<div>    <slot></slot> </div>

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

<demo-content>   <h3>Hi!</h3>   <class-name name="Welcome toVue!"></class-name> </demo-content>

你可以在Vue項(xiàng)目中使用多種不同類型的slots。但最重要的一點(diǎn)是，當(dāng)slots在增多時(shí)，項(xiàng)目也會(huì)隨之受到巨大的影響，slots可以使得整個(gè)項(xiàng)目中的代碼維持完整且易于理解。

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

AddyOsmani：“有效構(gòu)建‘大型'事物的秘訣通常是避免從一開(kāi)始就抱著直接構(gòu)建大型事物的想法。相反，可以用更小、更集中的作品來(lái)構(gòu)成大型事物。這樣一來(lái)，就更容易看到小的事物是如何組成大的事物的了?！?/p>

你可以遵循F.I.R.S.T原則，將自己的組件構(gòu)建為：專注的、獨(dú)立的、可重復(fù)使用的以及小型且可測(cè)試的。

還可以使用Bit(Github)之類的工具對(duì)每個(gè)項(xiàng)目的組件進(jìn)行獨(dú)立式源代碼管理，并將其共享給Bit的組件中心。共享的組件、自動(dòng)生成的文檔和實(shí)時(shí)示例將一起顯示在Bit的組件中心上?？梢允褂肗PM進(jìn)行安裝或使用Bit對(duì)其進(jìn)行“克隆”和修改，這會(huì)使查找、使用和維護(hù)組件變得更加容易(因此，也更易于維護(hù)項(xiàng)目)。

3. 維護(hù)良好的VUEX倉(cāng)庫(kù)

Vuex是Vue.js中的狀態(tài)管理模式，它負(fù)責(zé)應(yīng)用程序中所有組件的集中存儲(chǔ)功能。我看到有些評(píng)論說(shuō)：“Vuex限制了開(kāi)發(fā)人員根據(jù)需要構(gòu)造項(xiàng)目”。但事實(shí)是，Vuex可以通過(guò)使用一組原則來(lái)幫助開(kāi)發(fā)人員以更有條理的方式組織他們的項(xiàng)目。

在了解這些原理之前，首先應(yīng)該先了解以下4個(gè)Vuex倉(cāng)庫(kù)中的主要組件：

• States：用于保存應(yīng)用程序的數(shù)據(jù)

• Getters：用于訪問(wèn)倉(cāng)庫(kù)外部的狀態(tài)對(duì)象

• Mutations：用于修改狀態(tài)對(duì)象

• Actions：用于處理mutations

那么接下來(lái)看看需要遵循的原則：

• 需要將應(yīng)用程序級(jí)別狀態(tài)集中在倉(cāng)庫(kù)中。

• states應(yīng)始終通過(guò)處理mutations來(lái)進(jìn)行改變。

• 異步邏輯應(yīng)該被封裝，并且只能與actions一起使用。

遵循這三個(gè)原則，項(xiàng)目就可以被順利地組織出來(lái)，并且如果你覺(jué)得存儲(chǔ)文件越來(lái)越大，可以將它們拆分成單獨(dú)的文件。示例項(xiàng)目結(jié)構(gòu)如下所示：

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

模塊化VUEX倉(cāng)庫(kù)

本文中討論的是大型項(xiàng)目，此類項(xiàng)目中的項(xiàng)目文件會(huì)非常大而復(fù)雜。你需要以自己的方式管理倉(cāng)庫(kù)，并且需要避免商店倉(cāng)庫(kù)，因此最好以易于他人理解的方式對(duì)Vuex倉(cāng)庫(kù)進(jìn)行模塊化。

在此我們沒(méi)有定義項(xiàng)目中模塊的定義方法，有些開(kāi)發(fā)人員會(huì)根據(jù)功能進(jìn)行模塊化，有些則根據(jù)數(shù)據(jù)模型進(jìn)行模塊化。關(guān)于模塊化的最終決定完全取決于你自己，這將對(duì)個(gè)人和團(tuán)隊(duì)有長(zhǎng)期幫助。

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

使用助手來(lái)簡(jiǎn)化代碼

前文提到了Vuex倉(cāng)庫(kù)中使用的4個(gè)組件。假設(shè)如果出現(xiàn)需要訪問(wèn)這些states、getters或需要調(diào)用actions或組件中的mutations的情況，那么無(wú)需創(chuàng)建多個(gè)計(jì)算屬性或方法，就可以輕松使用輔助方法(mapState,  mapGetters, mapMutations 和 mapActions)來(lái)減少代碼。

來(lái)看看這四個(gè)輔助工具：

(1) mapState

如果需要在一個(gè)組件中調(diào)用多個(gè)存儲(chǔ)狀態(tài)屬性或getters，就可以使用mapState幫助生成一個(gè)getter函數(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可幫助將倉(cāng)庫(kù)getters映射到本地計(jì)算屬性。

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

(3) mapMutations

mapMutations可以用于幫助提交組件中的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

可以用于幫助在組件中分派操作，并將組件方法映射到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)目中都很重要。作為開(kāi)發(fā)人員，無(wú)論項(xiàng)目的重要性或規(guī)模如何，我們都必須測(cè)試開(kāi)發(fā)的內(nèi)容。尤其是在涉及大型項(xiàng)目中，往往有成千上萬(wàn)的小型功能，因此我們有責(zé)任測(cè)試每個(gè)功能。

這就是單元測(cè)試的必要性，它可以使開(kāi)發(fā)人員測(cè)試單個(gè)代碼單元。單元測(cè)試不僅可以避免錯(cuò)誤，而且每當(dāng)開(kāi)發(fā)人員進(jìn)行更改時(shí)，修改的結(jié)果也可以提升開(kāi)發(fā)團(tuán)隊(duì)對(duì)其工作的信心。隨著項(xiàng)目的進(jìn)行，開(kāi)發(fā)人員可以從項(xiàng)目的開(kāi)始就遵循良好的單元測(cè)試機(jī)制來(lái)添加新功能，不必?fù)?dān)心會(huì)破壞其他功能。

在Vue.js中進(jìn)行的單元測(cè)試與所有其他框架的單元測(cè)試方法大同小異，你可以輕松地將Jest，Karma或Mocha與Vue.js結(jié)合使用。盡管有測(cè)試框架，但是在編寫單元測(cè)試時(shí)，還是有些需要記住的一般性事項(xiàng)：

• 編寫單元測(cè)試以涵蓋每個(gè)Vue組件。

• 測(cè)試必須提供清晰的失敗錯(cuò)誤消息ID。

• 使用良好的斷言庫(kù)。例如：在Jest框架中內(nèi)置了斷言庫(kù)，Chai斷言庫(kù)與Mocha一起使用。圖源：unsplash

通過(guò)從項(xiàng)目開(kāi)始就遵循這些步驟的方法，隨著項(xiàng)目結(jié)構(gòu)的發(fā)展，開(kāi)發(fā)人員可以大大減少調(diào)試和手動(dòng)測(cè)試所花費(fèi)的時(shí)間。

除了單元測(cè)試之外，Vue.js與其他任何框架一樣都支持E2E測(cè)試和集成測(cè)試。因此，你也可以將這些也結(jié)合到項(xiàng)目中。通常，路由部分不會(huì)使用單元測(cè)試進(jìn)行測(cè)試，并且通過(guò)端到端測(cè)試進(jìn)行覆蓋。Vue倉(cāng)庫(kù)是最難測(cè)試的部分，對(duì)states，actions或getters的單獨(dú)測(cè)試往往被認(rèn)為是無(wú)用的，我推薦的方法是集成測(cè)試。

看看這優(yōu)秀的技術(shù)能力，我認(rèn)為Vue.js用于大規(guī)模項(xiàng)目完全沒(méi)問(wèn)題，它可以輕松地管理這些項(xiàng)目而不會(huì)造成混亂。

到此，關(guān)于“Vue.js項(xiàng)目實(shí)踐的方法教程”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！