構(gòu)建大型Vue.js項(xiàng)目的小技巧有哪些-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“構(gòu)建大型Vue.js項(xiàng)目的小技巧有哪些”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“構(gòu)建大型Vue.js項(xiàng)目的小技巧有哪些”這篇文章吧。

為吉陽等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及吉陽網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站建設(shè)、成都做網(wǎng)站、吉陽網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

1. 使用 slot, 讓組件更強(qiáng)大，也更容易理解

最近我寫了篇關(guān)于 Vue.js slot 的文章，它強(qiáng)調(diào)了 slot 如何使組件更易于重用和維護(hù)，以及為什么應(yīng)該使用它們。

但是這與 Vue.js 大型項(xiàng)目有什么關(guān)系呢？一張圖片通常勝過千言萬語，所以我要給你描繪一幅關(guān)于我第一次后悔沒有使用它們的畫面。

有一天，我要?jiǎng)?chuàng)建一個(gè) popup。乍一看并沒有什么復(fù)雜的東西，只是包含了一個(gè)標(biāo)題，一個(gè)描述和一些按鈕。所以我所做的就是把一切配置一股腦當(dāng)做 props 傳進(jìn)去。最終我定義了三個(gè) prop，用于自定義組件，當(dāng)用戶單擊按鈕時(shí)將發(fā)送一個(gè)事件。So easy !

但是，隨著項(xiàng)目的發(fā)展，團(tuán)隊(duì)要求我們?cè)谄渲姓故靖嗥渌男聝?nèi)容：表單字段、不同的按鈕(取決于它顯示在哪個(gè)頁面上)、卡片、頁腳，以及列表。我以為，如果繼續(xù)使用 prop 來迭代這個(gè)組件也沒啥問題。但是我滴個(gè)神哪，我是大錯(cuò)特錯(cuò)！組件很快變得非常復(fù)雜，難以理解，因?yàn)樗藷o數(shù)的子組件，用了太多的 prop，并發(fā)送了一堆的事件。我開始體驗(yàn)到了可怕的情況，當(dāng)你做出一點(diǎn)改動(dòng)，其他頁面的某個(gè)地方就會(huì)崩潰！我仿佛造了一個(gè) Frankenstein 怪人，而不是一個(gè)可維護(hù)的組件!?

然而，如果我從一開始就依賴 slot，情況可能會(huì)好多了。最后我重構(gòu)了所有東西，得到了這個(gè)小組件：更容易維護(hù)，理解起來更快，更好擴(kuò)展！

<template>
 <div class="c-base-popup">
 <div v-if="$slot.header" class="c-base-popup__header">
 <slot name="header">
 </div>
 <div v-if="$slot.subheader" class="c-base-popup__subheader">
 <slot name="subheader">
 </div>
 <div class="c-base-popup__body">
 <h2>{{ title }}</h2>
 <p v-if="description">{{ description }}</p>
 </div>
 <div v-if="$slot.actions" class="c-base-popup__actions">
 <slot name="actions">
 </div>
 <div v-if="$slot.footer" class="c-base-popup__footer">
 <slot name="footer">
 </div>
 </div>
</template>

<script>
export default {
 props: {
 description: {
 type: String,
 default: null
 },
 title: {
 type: String,
 required: true
 }
 }
}
</script>

我的觀點(diǎn)是，從經(jīng)驗(yàn)來看，那些知道何時(shí)使用 slot 的開發(fā)人員所構(gòu)建的項(xiàng)目確實(shí)會(huì)對(duì)其未來的可維護(hù)性產(chǎn)生很大的影響。由于發(fā)送的事件更少，代碼更容易理解，而且提供了更大的靈活性，可以在其中顯示任何組件。

敲黑板：根據(jù)經(jīng)驗(yàn)，當(dāng)你開始在父組件中復(fù)制子組件的 prop 時(shí)，你就應(yīng)該考慮使用 slot 了。

2. 合理組織 Vuex Store

通常，Vue.js 新手開始了解Vuex，因?yàn)樗麄儎偤门龅搅诉@兩個(gè)問題：

• 組件樹結(jié)構(gòu)中相隔太遠(yuǎn)的組件之間訪問數(shù)據(jù)

• 組件銷毀后需要持久化數(shù)據(jù)

這個(gè)時(shí)候他們就會(huì)創(chuàng)建第一個(gè) Vuex store，學(xué)習(xí)模塊并開始在應(yīng)用程序中組織它們。
問題在于，創(chuàng)建模塊時(shí)沒有單一的模式可以遵循。然而，我強(qiáng)烈建議你仔細(xì)考慮如何組織它們。據(jù)我所見，大多數(shù)開發(fā)人員更喜歡根據(jù)功能來組織它們。例如:

• Auth.

• Blog.

• Inbox.

• Settings.

就我來說，我發(fā)現(xiàn)根據(jù)從 API 獲取的數(shù)據(jù)模型來組織它們更容易理解。例如:

• Users

• Teams

• Messages

• Widgets

• Articles

如何選擇取決于你自己。唯一需要記住的是，從長(zhǎng)遠(yuǎn)來看，一個(gè)組織良好的 Vuex store 會(huì)造就一個(gè)更高效的團(tuán)隊(duì)。它還將使新人在加入團(tuán)隊(duì)時(shí)更容易將他們的想法圍繞在你的代碼基礎(chǔ)上。

3. 使用 action 發(fā)起 API 調(diào)用和提交數(shù)據(jù)

我的大部分 API 調(diào)用（如果不是全部）是在Vuex action 里面完成的。你可能會(huì)問：為什么要這么做？ ?

♀? 簡(jiǎn)單來說，它們中的大多數(shù)獲取的數(shù)據(jù)需要提交到 store里去。另外，它們還提供了一層封裝和可重用性，我很喜歡用。還有一些原因如下：

• 如果我需要在兩個(gè)地方（假設(shè)是博客頁面和首頁）獲取文章的第一頁，我只需要用正確的參數(shù)調(diào)用合適的 dispatcher 就行了。除了 dispatcher 調(diào)用，無需重復(fù)代碼就可以完成數(shù)據(jù)的獲取，commit 到 store 和返回。

• 如果我需要寫一些避免重復(fù)獲取第一頁的邏輯，我就可以在一個(gè)地方完成。這樣做除了會(huì)減輕服務(wù)器負(fù)載，還會(huì)增強(qiáng)我對(duì)代碼的信心。

• 我可以跟蹤這些操作中的大多數(shù) Mixpanel（一個(gè)網(wǎng)站用戶行為分析工具） 事件，這使得分析代碼非常容易維護(hù)。我確實(shí)有一些應(yīng)用程序，其中所有的 Mixpanel 調(diào)用都是只在 action 中完成的。我不需要了解哪些數(shù)據(jù)被跟蹤，哪些沒有，以及什么時(shí)候發(fā)送這些信息。以這種工作方式的樂趣簡(jiǎn)直無法言說。

4. 用 mapState，mapGetters，mapMutations 和 mapActions 簡(jiǎn)化代碼

通常不需要?jiǎng)?chuàng)建多個(gè)計(jì)算屬性或方法，只需在組件內(nèi)部訪問 state/getters 或者調(diào)用 actions/mutations 。使用mapState，mapGetters，mapMutations 和 mapActions 
可以幫助你簡(jiǎn)化代碼，把來自 store 模塊的數(shù)據(jù)分組到一起，讓代碼更容易理解。

// NPM
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";

export default {
 computed: {
 // Accessing root properties
 ...mapState("my_module", ["property"]),
 // Accessing getters
 ...mapGetters("my_module", ["property"]),
 // Accessing non-root properties
 ...mapState("my_module", {
 property: state => state.object.nested.property
 })
 },

 methods: {
 // Accessing actions
 ...mapActions("my_module", ["myAction"]),
 // Accessing mutations
 ...mapMutations("my_module", ["myMutation"])
 }
};

有關(guān)以上工具方法的所有信息都在  Vuex 官方文檔。

5. 使用 API 工廠

我通常喜歡寫一個(gè)this.$api 助手，以便在任何地方調(diào)用，獲取后臺(tái) API 資源。在我的項(xiàng)目根目錄有一個(gè)api 文件夾，包含了所有相關(guān)的類。如下所示（僅部分）：

api
├── auth.js
├── notifications.js
└── teams.js

每個(gè)文件都將其類別下的所有 API 資源分組。下面是我在 Nuxt 應(yīng)用中使用插件初始化這個(gè)模式的方法（在標(biāo)準(zhǔn)的 Vue 應(yīng)用中的過程也類似）。

// PROJECT: API
import Auth from "@/api/auth";
import Teams from "@/api/teams";
import Notifications from "@/api/notifications";

export default (context, inject) => {
 if (process.client) {
 const token = localStorage.getItem("token");
 // Set token when defined
 if (token) {
 context.$axios.setToken(token, "Bearer");
 }
 }
 // Initialize API repositories
 const repositories = {
 auth: Auth(context.$axios),
 teams: Teams(context.$axios),
 notifications: Notifications(context.$axios)
 };
 inject("api", repositories);
};

export default $axios => ({
 forgotPassword(email) {
 return $axios.$post("/auth/password/forgot", { email });
 },

 login(email, password) {
 return $axios.$post("/auth/login", { email, password });
 },

 logout() {
 return $axios.$get("/auth/logout");
 },

 register(payload) {
 return $axios.$post("/auth/register", payload);
 }
});

現(xiàn)在，我可以簡(jiǎn)單地在我的組件或 Vuex action 里像這樣調(diào)用它們：

export default {
 methods: {
 onSubmit() {
 try {
 this.$api.auth.login(this.email, this.password);
 } catch (error) {
 console.error(error);
 }
 }
 }
};

6. 使用 $config 訪問環(huán)境變量（在模板里特別有用）

你的項(xiàng)目可能在一些文件中定義了一些全局配置變量：

config
├── development.json
└── production.json

我喜歡通過 this.$config 助手快速訪問它們，特別是在模板里。像往常一樣，擴(kuò)展 Vue 對(duì)象非常容易：

// NPM
import Vue from "vue";

// PROJECT: COMMONS
import development from "@/config/development.json";
import production from "@/config/production.json";

if (process.env.NODE_ENV === "production") {
 Vue.prototype.$config = Object.freeze(production);
} else {
 Vue.prototype.$config = Object.freeze(development);
}

7.  按照某個(gè)約定來給代碼提交命名

隨著項(xiàng)目的增長(zhǎng)，你可能需要定期瀏覽組件的歷史記錄。如果你的團(tuán)隊(duì)沒有遵循相同的約定來命名他們的提交，那么理解每個(gè)提交將會(huì)變得更加困難。

我一直推薦使用 Angular 提交信息指南。我在每個(gè)項(xiàng)目中都遵循它，在很多情況下，其他團(tuán)隊(duì)成員很快就會(huì)發(fā)現(xiàn)遵循它帶來的好處。

遵循這些指導(dǎo)原則可以得到更具可讀性的信息，這使得在查看項(xiàng)目歷史記錄時(shí)更容易跟蹤提交。簡(jiǎn)而言之，它是這樣工作的：

git commit -am "<type>(<scope>): <subject>"

# 舉例
git commit -am "docs(changelog): update changelog to beta.5"
git commit -am "fix(release): need to depend on latest rxjs and zone.js"

看下他們的 README 文件 了解更多了解更多關(guān)于它和相關(guān)約定。

8. 項(xiàng)目上線后固定 package 版本

我知道，所有 package 都應(yīng)該遵循語義化版本規(guī)則。但現(xiàn)實(shí)情況是，有些根本沒有遵守。

為了避免因?yàn)槟硞€(gè)依賴項(xiàng)破壞了整個(gè)項(xiàng)目而不得不在半夜醒來，鎖定所有 package 版本可以讓你的早晨工作壓力更小。

它的意思很簡(jiǎn)單：避免使用帶 ^ 前綴的版本號(hào)：

{
 "name": "my project",

 "version": "1.0.0",

 "private": true,

 "dependencies": {
 "axios": "0.19.0",
 "imagemin-mozjpeg": "8.0.0",
 "imagemin-pngquant": "8.0.0",
 "imagemin-svgo": "7.0.0",
 "nuxt": "2.8.1",
 },

 "devDependencies": {
 "autoprefixer": "9.6.1",
 "babel-eslint": "10.0.2",
 "eslint": "6.1.0",
 "eslint-friendly-formatter": "4.0.1",
 "eslint-loader": "2.2.1",
 "eslint-plugin-vue": "5.2.3"
 }
}

9. 在顯示大量數(shù)據(jù)時(shí)使用 Vue Virtual Scroller

當(dāng)你需要在某個(gè)頁面中顯示大量的行，或者需要循環(huán)大量的數(shù)據(jù)時(shí)，你可能已經(jīng)注意到頁面可能會(huì)很快變得非常慢。要解決這個(gè)問題，你可以使用vue-virtual-scoller。

npm install vue-virtual-scroller

它將只渲染列表中可見的項(xiàng)，并重用組件和 dom 元素，效率高，性能好。它真的很容易使用，如絲般順滑！?

<template>
 <RecycleScroller
 class="scroller"
 :items="list"
 :item-size="32"
 key-field="id"
 v-slot="{ item }"
 >
 <div class="user">
 {{ item.name }}
 </div>
 </RecycleScroller>
</template>

10. 跟蹤第三方包的大小

當(dāng)很多人在同一個(gè)項(xiàng)目中工作時(shí)，如果沒人關(guān)注安裝包的數(shù)量，那么很快就會(huì)越來越多。為了避免應(yīng)用程序變慢(特別是在移動(dòng)網(wǎng)絡(luò)變慢的情況下)，我在 VS Code 中使用了 import cost 插件。這樣，我就可以從我的編輯器中看到導(dǎo)入的模塊庫有多大，并且可以在它變得太大時(shí)檢查出問題。

例如，在最近的一個(gè)項(xiàng)目中，整個(gè) lodash 庫被導(dǎo)入(大約有24kB的gzipped)。結(jié)果只使用了 cloneDeep 方法。通過 import cost 插件定位到這個(gè)問題，我們是這樣解決的：

npm remove lodash
npm install lodash.clonedeep

cloneDeep 函數(shù)可以在需要的地方引入：

import cloneDeep from "lodash.clonedeep";

要進(jìn)一步優(yōu)化，你可以使用 Webpack Bundle Analyzer  ，用交互式的可縮放地圖可視化文件大小。

以上是“構(gòu)建大型Vue.js項(xiàng)目的小技巧有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前文章：構(gòu)建大型Vue.js項(xiàng)目的小技巧有哪些-創(chuàng)新互聯(lián)
文章地址：http://muchs.cn/article4/pgcoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、網(wǎng)站營(yíng)銷、外貿(mào)網(wǎng)站建設(shè)、小程序開發(fā)、品牌網(wǎng)站設(shè)計(jì)、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)