在為這個(gè)列表挑選工具時(shí)，我們考慮了整個(gè) Vue JS 的開發(fā)周期。從為你的新應(yīng)用程序設(shè)置樣板開始，我們涵蓋了許多重要的應(yīng)用程序概念、調(diào)試甚至測(cè)試內(nèi)容。

那就開始吧。

[[313844]]

1. Vue CLI

與其他所有 JavaScript 框架一樣，你需要 CLI 工具才能用 Vue 做很多事情。CLI 使你可以快速創(chuàng)建項(xiàng)目結(jié)構(gòu)并部署樣板。它還允許你創(chuàng)建實(shí)時(shí)原型來(lái)演示新功能。

除了常見的功能外，Vue CLI 還提供了許多額外內(nèi)容，比如對(duì)一眾 Web 開發(fā)工具的支持，包括 TypeScript、Babel、PostCSS、ESLint、單元測(cè)試、PWA 和端到端測(cè)試等。它還與社區(qū)創(chuàng)建的可擴(kuò)展第三方插件相兼容。

Vue CLI 的另一個(gè)好處是它不需要彈出。換句話說(shuō)，Vue CLI 與其他框架相比有更大的自定義空間。Vue CLI 的圖形用戶界面是其最重要的特性之一，可讓你方便地創(chuàng)建新項(xiàng)目并管理它們。

2. Nuxt JS

設(shè)置好 VueJS 之后，要?jiǎng)?chuàng)建你的應(yīng)用程序，第一步就是設(shè)置一個(gè)好的樣板，這樣就無(wú)需從頭開始編寫代碼了。樣板創(chuàng)建有很多選項(xiàng)，而我們這里選擇的工具是 Next JS;因?yàn)樗试S你創(chuàng)建多種類型的應(yīng)用程序，例如服務(wù)端渲染(SSR)、漸進(jìn)式 Web 應(yīng)用程序(PWA)、單頁(yè)應(yīng)用程序(SPA)， 和靜態(tài)站點(diǎn)。

Nuxt 有一個(gè)模塊化架構(gòu)，并擁有 50 多個(gè)模塊，可以加快你的開發(fā)流程。這些模塊支持的任務(wù)類型眾多，例如引入 PWA、添加 Google Analytics 或生成站點(diǎn)地圖等。

它還通過(guò)自己的包分析器實(shí)現(xiàn)了 Vue JS 和 Node.JS 的優(yōu)秀實(shí)踐，提供了開箱即用的性能調(diào)優(yōu)。

3. Bit for Vue

Bit 是 為團(tuán)隊(duì)構(gòu)建下一代 Vue 組件庫(kù) 的好方法。它解決了跨存儲(chǔ)庫(kù)共享和協(xié)作處理 UI 組件的問(wèn)題。這也是一種將 UI 與共享組件(獨(dú)立開發(fā)、版本控制和更新)組合在一起的有效方法。

你可以在 bit.dev 平臺(tái) 中托管和組織組件。把組件庫(kù)比作音樂專輯的話，那么 Bit.dev 就像是 iTunes 一樣。Bit.dev 利用 Bit 的 CLI 工具，使你可以管理任何本地項(xiàng)目中獨(dú)立組件的版本，并將它們推送到 Bit.dev 上的集合中;在這個(gè)集合中可以對(duì)這些組件執(zhí)行組織、編輯文檔、渲染以及安裝 / 導(dǎo)入等操作。

在 Bit.dev 中，你的團(tuán)隊(duì)可以從任何新項(xiàng)目中搜索、渲染、安裝甚至更新任意組件。平臺(tái)提供了許多開箱可用的功能，包括自動(dòng)組件文檔、渲染沙箱等。

Bit 的秘訣在于跟蹤每個(gè)組件的依賴項(xiàng)，并將組件作為獨(dú)立的代碼單元來(lái)進(jìn)行版本控制。它還可以在隔離的環(huán)境中構(gòu)建和測(cè)試共享組件，從而確保共享組件真正可復(fù)用，然后再將其從本地項(xiàng)目導(dǎo)出到 bit.dev 的集合中。

• 了解更多：Bit.dev 組件庫(kù)的 15 大優(yōu)勢(shì)

https://blog.bitsrc.io/15-reasons-to-build-your-component-library-in-bit-dev-93a514878863

• 在此處查看 Bit 工作流程的真實(shí) Vue 應(yīng)用演示：

https://blog.bitsrc.io/15-reasons-to-build-your-component-library-in-bit-dev-93a514878863

4. Vue-router

如果你熟悉其他 JavaScript 框架，那么肯定也很熟悉路由的概念。路由器用來(lái)將應(yīng)用程序 URL 映射到各個(gè)組件上。Vue-router 在這方面做得很好，并支持基于組件的路由器配置。

此外，它還支持路由器參數(shù)、查詢和通配符，以支持復(fù)雜的路由。與其他框架相比，它提供的了過(guò)渡效果等特性，使更改路由的過(guò)程對(duì)用戶更加友好;它還提供了帶有活動(dòng) CSS 類的鏈接，從而帶來(lái)了更多可能性。

Vue-router 還可以選擇使用 HTML5 歷史記錄或哈希模式。這非常重要，因?yàn)樗鼤?huì)影響用戶體驗(yàn)，尤其是當(dāng)應(yīng)用程序的設(shè)計(jì)要求用戶轉(zhuǎn)到上一頁(yè)時(shí)更是如此。

5. Vuex

狀態(tài)管理是許多開發(fā)人員都頭疼的重大問(wèn)題。沒有適當(dāng)?shù)臓顟B(tài)控制意味著應(yīng)用程序的行為可能難以預(yù)測(cè)。Vuex 集中了所有狀態(tài)管理函數(shù)，并僅允許狀態(tài)以可預(yù)測(cè)的方式突變，從而更好地解決狀態(tài)管理這個(gè)問(wèn)題。

Vuex 允許基于狀態(tài)、視圖和動(dòng)作進(jìn)行突變。狀態(tài)定義有關(guān)應(yīng)用程序的事實(shí);視圖向用戶顯示這些事實(shí)，而動(dòng)作會(huì)導(dǎo)致狀態(tài)更改，從而重新啟動(dòng)突變周期。

Vuex 還提供了諸如零配置時(shí)間旅行調(diào)試和狀態(tài)快照導(dǎo)出 / 導(dǎo)入等功能。

6. Axios

Axios是一個(gè)流行的第三方庫(kù)，用于創(chuàng)建和管理 ajax 請(qǐng)求。Vue 將曾經(jīng)是“官方”的 ajax 庫(kù)"vue-resource"從其存儲(chǔ)庫(kù)中分離出來(lái)之后，Vue 團(tuán)隊(duì)的首選就變成了 Axios。因此 Axios 的流行度和使用率得到了提升。

這是有充分的理由的。盡管 Axios 不是官方 Vue 存儲(chǔ)庫(kù)的一部分，但它與它的前任很像，并且具有通用性、支持取消功能并具有 TypeScript 定義。使用 Axios 時(shí)要注意的一點(diǎn)是，如果你的服務(wù)器本身不支持 Promise，則需要自己提供一個(gè) polyfill。

7. Vuetify

顧名思義，Vuetify 是“Vue”和“Beautify”兩個(gè)詞的組合，能讓你的應(yīng)用程序獲得優(yōu)美的 Vue 體驗(yàn)。它是一個(gè)精美的手工挑選的 UI 組件庫(kù)，即使你不是設(shè)計(jì)師，它也可以幫助你創(chuàng)建漂亮的應(yīng)用程序。

它提供了 80 多個(gè)基于 Material Design 規(guī)范的組件，并通過(guò)其 Vue CLI 插件提供了現(xiàn)成的項(xiàng)目骨架。SSR 支持也是內(nèi)置的。這些組件包括警報(bào)、Banner、Badge、按鈕、表單輸入和控件，還有進(jìn)度小部件等。

8. Vue Apollo

GraphQL 是一種多功能工具，用來(lái)利用各種 API 的能力。你可以用它查詢應(yīng)用程序或函數(shù)所需的正確數(shù)據(jù)。Vue Apollo 是將 GraphQL 用于 Vue 的最便捷方法之一。

Apollos 組件能夠以一種真正的聲明方式來(lái)使用 GraphQL。Apollo 的核心是為后端應(yīng)用程序提供一個(gè) Schema 語(yǔ)言，同時(shí)為前端提供一個(gè)查詢語(yǔ)言，以便進(jìn)行數(shù)據(jù)交換。它還支持 SSR，這樣你就可以在服務(wù)端渲染 HTML 了。

9. Mocha

任何應(yīng)用程序的一大要素就是測(cè)試。它能確保應(yīng)用程序滿足客戶的期望，確保開發(fā)工作以適當(dāng)?shù)姆绞竭M(jìn)行。對(duì)于使用 Vue 或其他 JavaScript 框架構(gòu)建的應(yīng)用程序來(lái)說(shuō)，測(cè)試是尤其重要的。

盡管有許多框架可以用來(lái)執(zhí)行測(cè)試，但我們選擇的是 Mocha，因?yàn)?Mocha 既可以通過(guò) Node.JS 在后端運(yùn)行，也可以在前端運(yùn)行。這就讓異步測(cè)試既方便又有意義，因?yàn)閮啥说牧鞒潭嫉玫搅蓑?yàn)證。它還提供了將未捕獲的異常映射到 GitHub 上相關(guān)測(cè)試用例的能力，這樣就更容易跟蹤和解決它們了。

10. 用于瀏覽器的 Vue.js DevTools

調(diào)試對(duì)于高效的開發(fā)流程而言是至關(guān)重要的。如果沒有良好的調(diào)試工具，我們幾乎無(wú)法掌握應(yīng)用程序的運(yùn)行情況。除了 Vue JS 推薦的官方調(diào)試工具以外，我們還可以添加其他更好的選擇。

Vue.js DevTools 具有適用于 Firefox 和 Chrome 的插件，還有適用于任何環(huán)境的一個(gè)獨(dú)立的 Electron 應(yīng)用。瀏覽器插件將“Vue”選項(xiàng)卡添加到其原生開發(fā)工具實(shí)現(xiàn)中，從而使調(diào)試體驗(yàn)變得更加流暢，對(duì)用戶更友好。

11. 官方 Vue.js 指南

最后一條也很有用，如果我們對(duì) Vue 及其相關(guān)的所有出色工具產(chǎn)生了興趣，那么可以去官方 Vue JS 指南了解更多信息：

https://vuejs.org/v2/guide/

該指南適用于所有當(dāng)前和過(guò)去的 Vue 版本，因此無(wú)論你是剛開始入門，還是希望改進(jìn)或擴(kuò)展基于舊版本 Vue 的已有應(yīng)用程序，都可以從本指南中獲益良多。你還可以通過(guò)版本歷史輕松對(duì)比組件的更改方式。

此外，指南還內(nèi)置了視頻、代碼段和交互式應(yīng)用程序，以使其更具交互性且更易理解。指南的最后一部分提供了與其他框架(例如 React 和 Angular)的詳細(xì)對(duì)比。這為已經(jīng)熟悉此類框架，準(zhǔn)備轉(zhuǎn)向 Vue 的開發(fā)人員提供了一條有吸引力的途徑。

總結(jié)

你喜歡我們總結(jié)的清單嗎?我們希望本文能勾起你學(xué)習(xí) Vue 的興趣，或者如果你已經(jīng)熟悉 Vue 了，也可以嘗試其中一些工具。

無(wú)論你是剛剛?cè)腴T還是經(jīng)驗(yàn)豐富的開發(fā)人員，這些工具都可以讓你的開發(fā)流程效率更高。正如創(chuàng)作者 Evan You 所說(shuō)：“你會(huì)喜歡 Vue 的!”。