如今 Vue 的熱度不斷攀升，使用者越來越多，Vue.js 工具也隨處可見。這種現象不是憑空產生的：Vue 的學習曲線友好，功能驅動的結構清晰易懂，文檔出色易學，所以新人入門很容易，經驗豐富的開發人員也可以快速從其他框架（如 React 或 Angular）切換過來。

只要你認真對待 Vue 的開發工作，逐漸就會發現很多優秀的基礎工具和庫。這些工具將點亮你的 Vue 開發職業生涯，讓你渾身上下散發專業氣息。

本文總結了一些最值得關注的工具和庫，相信你遲早會用在自己的 Vue.js 項目中。同類文章經常只會列舉一些 UI 組件庫，而本文涉及的范圍更廣，探討了 Vue 生態系統中的一系列工具、庫和插件。

我的選擇是基于實用性、有效性和獨特性等原則——而不是它們的 GitHub 受歡迎程度或星級評分。

閑話不提，我們先來看 Top10。

1、Vue CLI

似乎現在每款 JavaScript 應用程序框架都必須使用某種 CLI 工具，Vue 也不例外。Vue CLI 是針對快節奏 Vue 開發打造的一套功能齊全的工具。除了常見的項目骨架之外，它還有方便的即時原型制作功能，你無需創建完整項目就可以嘗試新的創意。

Vue CLI 直接支持各種主流 Web 開發工具和技術，如 Ba??bel、TypeScript、ESLint、PostCSS、PWA、Jest、Mocha、Cypress 和 Nightwatch 等。這主要歸功于它的可擴展插件系統。這意味著社區可以構建和共享可復用的插件以滿足常見需求。

Vue CLI 強大的 GUI（Vue UI，它隨 CLI 一起提供）則為其錦上添花。在其幫助下你可以輕松創建并直接配置和管理項目。

?VueCLI（ https://cli.vuejs.org/ ）

2、VuePress

VuePress 是 Vue 生態系統中的另一大重頭戲。它是一個基于 Vue 的靜態站點生成器，最初是用來編寫技術文檔的工具，現在則發展成為一個小巧、緊湊、功能強大的無頭 CMS。從版本 1.x 開始，它提供了出色的博客功能和強大的插件系統。它有一個默認主題（適用于技術文檔），但你也可以構建自定義主題或使用社區中的預制主題。

在 VuePress 中，你使用 Markdown 編寫內容，然后將其轉換為預渲染的靜態 HTML 文件。這些文件加載完畢后，你的站點就成為了由 Vue、Vue Router 和 Webpack 支持的單頁應用程序。

VuePress 的一大好處就是你可以在 Markdown 文件中包含 Vue 代碼或組件，帶來了強大的功能和靈活性。你可以像開發普通的 Vue 應用程序一樣開發你的網站，并充分利用 Vue 應用的種種優勢。

?VuePress（ https://v1.vuepress.vuejs.org/ ）

3、Gridsome

Gridsome 與 VuePress 有許多相似之處，但前者在處理數據源時采用了另一種非常強大的方法。你可以用它在應用程序中連接和使用許多不同類型的數據，然后將這些數據統一到一個 GraphQL 層中。基本上來說，Gridsome 用 Vue 提供前端功能，并使用 GraphQL 管理數據。其工作機制可總結為以下三個步驟：

1. 你負責提供 Markdown、JSON、YAML 或 CVS 數據格式的內容，或從 WordPress 或 Drupal 等 CMS 導入內容。
2. 內容會被轉換為 GraphQL 層，該層負責中心化數據管理。然后你基于這些數據用 Vue 構建應用程序。
3. 你將預渲染的 HTML 文件部署到靜態 Web 主機或 CDN 上，如 Netlify、Amazon S3、 Now.sh 、Surge.sh 等。

Gridsome 提供了一些開箱即用的最佳實踐，如代碼分割、資產優化、漸進式圖像和鏈接預取等。所以 Gridsome 用起來很快，而且對 PWA 支持完善，對 SEO 也很友好。

?Gridsome（ https://gridsome.org/ ）

4、Vuex

開發人員構建 Web 應用程序時面對的一大問題就是狀態管理。為了解決這個問題，Vue 提供了一個狀態管理系統——Vuex。它負責集中存儲應用程序中的所有組件，確保狀態只能以可預測的方式變化。一個存儲區是一個特殊的對象，分為四個部分：

• state – 存儲應用數據的對象。
• getter – 包含用來抽象狀態訪問的方法的對象。
• mutation – 包含直接影響狀態的方法的對象。
• action – 包含用來觸發突變和執行異步代碼的方法的對象。

存儲區也可以分割為多個模塊以提高可維護性。

?Vuex（ https://vuex.vuejs.org/ ）

5、Nuxt

Nuxt 是常用的服務端渲染（SSR）方法。這個框架簡潔而直觀，可用來構建各種應用程序。它也是模塊化的，因此你可以只使用應用程序所需的那些模塊。

你可以使用 Nuxt 創建服務端渲染的應用程序（SSR）、單頁面應用程序（SPA）、漸進式 Web 應用（PWA），或者只用作作靜態站點生成器。

簡而言之，Nuxt 簡化了構建和優化應用程序的流程，為你提供簡潔而愉快的開發體驗。

?Nuxt（ https://nuxtjs.org/ ）

6、Vuetify

Vuetify 是最好用的 UI 組件庫之一。它提供了大量基于 Material Design 規范精心制作的組件（80 ），足以滿足任何應用程序的需求。

你可以用它來構建 SSR 應用程序、SPA、PWA 和移動應用。你可以創建新應用或將它們添加到現有應用中。它有免費和付費版主題可選，你也可以構建自己的主題。它還提供了一個系統，讓你可以只選出要用的組件，從而大大減少應用程序的最終大小。

所有 Vuetify 組件都附帶完善的文檔，并提供了清楚的示例。

?Vuetify（ https://vuetifyjs.com/en/ ）

7、Quasar

Quasar 是 Java“一次編寫，隨處運行”哲學的 JavaScript 版本。它是一個通用的，基于 Vue 的框架，讓你可以使用相同的代碼庫為不同的平臺編寫應用程序。SPA、PWA、SSR 應用、混合移動應用或多平臺桌面應用，任君選擇！

它帶有出色的文檔和大批兼顧性能和響應性的組件。Quasar 自帶許多最佳實踐（HTML/CSS/JS 壓縮、緩存清除、tree-shaking、源映射、代碼分割與懶加載、ES6 轉換、代碼 linting、可訪問性等），因此你可以專注于應用程序的功能實現。它還提供了一個用來輕松搭建新項目的 CLI 工具。

?Quasar（ https://quasar.dev/ ）

8、Storybook

Vue 是一個主要基于組件的框架，因此編寫優秀、高效的組件對所有開發人員來說都很重要，而 Storybook 可能就是非常趁手的工具。你可以用它在易用并隔離的環境中開發、管理和測試 UI 組件。它使開發人員能夠獨立于主應用程序創建組件，并在隔離的開發環境中以交互方式展示它們，而無需擔心特定于應用程序的依賴關系和需求。

Storybook 提供了大量的附加組件和靈活的 API，可根據需要自定義你的 storybook。你還可以導出為靜態 Web 應用程序，并將項目部署到 HTTP 服務器上。

?Storybook（ https://storybook.js.org/ ）

9、Vue Apollo

最近有很多關于 GraphQL 的討論。如果你很熟悉它，希望將其集成到 Vue 中，那么可以試試 Vue Apollo。這個庫是連接 Vue 和 GraphQL/Apollo 的一座橋梁，用起來順暢愉快。

?VueApollo（ https://vue-apollo.netlify.com/ ）

10、Eagle.js

Eagle.js 是一個使用 Vue 構建的功能強大、靈活且獨特的幻燈片系統。你可以在演示中創建易復用的組件、幻燈片和樣式。它還支持動畫、主題和交互式小部件，非常適合制作網絡演示內容。Eagle.js 有一個簡單且可調整的 API，因此你可以自由地制作所需的幻燈片。

這個庫最方便的一項功能之一是將一張幻燈片放在單獨的一個文件中，然后就能在其他幻燈片中重復使用了。你還可以將特定演示文檔中的幻燈片導入另一個文檔里。在這樣強大的工具幫助下，你就可以制作復雜、可交互且吸引人的演示文稿。

?Eagle.js（ https://github.com/zulko/eagle.js/ ）

另外 5 款值得關注的 Vue 工具和庫

• Vue DevTools 是一個很棒的瀏覽器擴展，用于調試 Vue 和 Vuex 應用程序。（https://github.com/vuejs/vue-devtools ）
• Vue Test Utils 是一組用于測試 Vue 組件的好用的工具。（ https://github.com/vuejs/vue-test-utils ）
• Vue Router 是 Vue 官方出品的路由器。（ https://github.com/vuejs/vue-router ）
• Vue Native 是一個用于移動應用程序的 JavaScript 框架，類似于 React Native。（ https://vue-native.io/ ）
• Weex 是一個使用現代 Web 技術（包括 Vue 在內）構建移動應用程序的框架。（https://weex.apache.org/ ）

小結

現在有了這么多工具，你就可以構建一些精彩的項目了：網站、應用程序、庫、插件……能做的事情還不止這些。去做出一些優秀的作品吧！

我個人的知識見聞自然是有限的，我可能會漏掉一些優秀的工具和庫，所以還有哪些出色的產品就請在評論里推薦吧。

英文原文： https://www.sitepoint.com/vue-js-tools-libraries/