這 16 個頂尖 Vue 開源項目，幫你成爲大師

轉載自 Duing（ID：duyi-duing）

原文鏈接：https://dev.to/flatlogic/top-16-vue-open-source-projects-227a

作者：Katarina Harbuzava

如有翻譯不準，請多指正

爲什麼我們要關注 Vue

Vue 是一個用於構建用戶界面的 JavaScript 框架。值得關注的是，它在沒有谷歌和 Facebook 的支持下獲得了大量的人氣。

Vue 是結合 react 和 angular 的最好的方法，並且擁有一個有凝聚力的，活躍的，能夠應對開發問題的大型社區。相同的社區能夠不斷地提出新的方法去解決常規的問題。隨着貢獻量的增加，可用的數據以及庫的數量也會隨之增加。

使用 Vue 的益處

框架很小。 這個框架的大小是 18- 21KB ；

Vue **支持基於組件的方法來構建 Web 應用程序;

文檔詳細。 開發人員總是喜歡使用帶有詳細文檔的框架，因爲他們編寫第一個應用程序總是很容易；

通俗易懂。 由於 Vue. js 結構簡單, 用戶可以很容易地將其添加到 Web 項目中。它有一個定義良好的體系結構來保存您的數據。生命週期法與定製法分離；

集成簡單。 你可以簡單地通過 CDN 添加 Vue. js –無需設置節點和 npm 開始使用 Vue. js 。你也可以使用它作爲一個偉大的 jQuery 替代品；

工具完善。 Vue. js 就有了。VueCLI 允許你啓動新項目，包括路由、狀態存儲、Linting、單元測試、CSS 預處理器、Typescript、PWA 等——它們都是內置的。此外，VueCLI 還提供了管理項目的 UI。

使用 Vue 的項目

如果你想創建輕量級且易於修復的應用程序，那麼 Vue. js 是一個不錯的選擇。

學習曲線相當低，允許在短時間內掌握框架，然後繼續進行應用程序開發。我們建議在以下情況下使用 Vue:

如果您想構建單頁應用程序或漸進式 WebApp (你可以使用 nuxt. js 框架);

你想讓你的團隊學習新的技術，Vue 是一個很好的選擇；

快速構建 MVP；

你想建立一個 SEO 友好的應用程序;

你有一個緊張的預算和希望迅速地測試的想法。

Vue 的受歡迎度

談到 Vue. js 的受歡迎程度, 在 #vue . js 中的 StackOverflow 內有超過 57, 000 個問題和大約 15, 000 個 npm 包。與其他框架相比，Vue. js 仍然排在第三位，但在沒有 Facebook 和 Google 支持的情況下仍然擁有非常好的社區。

開放源碼項目的評價標準

文檔。任何好的項目都應該有全面的文檔；

如何很好地描述提交的規則。如果開源項目想要增加貢獻者的數量，這是必不可少的；

如何很好地組織與問題的工作。處理問題的工作應組織良好，以便操作人員知道首先解決哪些問題；

項目是否有路線圖？路線圖幫助貢獻者選擇他們將首先開發的特性；

Github 上的星星數。這一標準在一定程度上反映了項目的質量；

成熟度。分析項目開發並試圖決定應該使用什麼作爲工具來獲得結果，需要小心選擇尚未成熟或沒有十足把握的工具；

bug 或者漏洞。如果你需要幫助，可能沒有大型的知識庫或社區。

在我們的選擇中, 我們根據功能目的劃分項目:

·CMS 和生成器；

·UI 組件；

· 應用程序；

· 工具包;

· 開發者工具。

Vue 開源項目

我們列出了你應該瞭解的最重要的工具和庫, 並最終在 Vue. js 項目中使用和貢獻。與許多其他文章只列出 UI 組件庫不同，我們在 Vue 生態系統中包含了其他庫和插件。

我們的選擇是基於他們的有用性、有效性、文檔、想法和貢獻指南。

01 CMSand Generators

頁面工具包

Pagekit 是一個開源的 CMS，在 Vue. js 和 Symphony 框架的幫助下構建。CMS 是模塊化的，所以你可以逐步擴展功能。Pagekit 是在 MIT 許可證下發布的，因此它可以自由地修改、共享和重新發布，沒有任何限制。

該產品具有 CMS 的所有主要和高級功能：

· 可定製的分析儀表板與網站性能;

· 網站內容編輯頁面；

· 內置博客；

·HTML 和 Markdown 編輯器;

· 文件管理器；

· 用戶角色管理。

還有一些東西和特點對開發者特別有用。該產品使用簡單的 ORM、模塊化架構和包管理構建。還有一個內置的調試工具欄，可以幫助開發人員監視性能、路由、數據庫查詢和調試內部系統事件、擴展甚至可以添加自己的功能。另外，也可以使用 CLI 執行系統更新、安裝和卸載擴展和主題，以及直接從終端清除緩存。

該產品有一個強大的貢獻指南，團隊歡迎人們來修復錯誤，翻譯或擴展 CMS 的功能。社區沒有那麼大，但非常發達，熱心幫助新人。

因此, 這是一個非常強大的產品, 具有非常全面的文檔和透明的貢獻指南。開啓開源世界之路的絕佳選擇。

02 Vuepress

VuePress 是一個由 Vue. js 作者 EvanYou 創建的基於 Vue 的靜態站點生成器。在 VuePress 幫助下，網站創建使用 VueRouter 、Vue 和 webpack 。最初，該產品是作爲編寫技術文檔的工具而創建的，但現在它是一個小型、緊湊、功能強大的 headless CMS 。在 VuePress 中你用 Markdown 寫內容，然後轉換成預渲染的靜態 HTML 文件。

該項目有一個組織良好的捐款指南，工作流程透明。它還有很好的問題管理功能。社區有超過 300 個活躍貢獻者, 他們可以支持你。這是你開始爲開源項目做貢獻的好選擇。

03 Vue 店面

Vuestorefront 是一款面向電子商務的 PWA，可以連接到幾乎任何電子商務後端：它使用了 headless 架構。這包括流行的 BigCommerce 平臺、Magento、Shopware 等。VueStorefront 的一些優勢包括移動優先的方法、服務器端渲染（有利於 SEO）和離線模式。

該產品擁有一個發達的社區：Slack 中約有 2000 名開發者和 180 多名活躍貢獻者。這是特別有價值的，因爲團隊有一個清晰的路線圖，所以你作爲一個貢獻者可以選擇你可以做的任務。總之，這是一個非常有趣的，支持和需要在上面花時間的產品。

04 Vuegg

Vuegg 允許您將組件直接拖放到可視化編輯器中，並根據你的選擇移動它們的大小，從而構建 Vue. js 項目。這個項目的目的是合併設計和原型到一個單一的過程。

顯著特徵:

· 通過拖放組件和移動 / 調整它們的大小來模擬 / 還原它們；

· 支持標準鼠標和鍵盤組合;

· 響應式預覽 (手機、平板電腦、網絡);

· 一組基本的 HTML5 元素;

· 材料設計組件（vue- mdc - adapter ）；

·Vuejs 源代碼生成 (download . zip)。

這個項目有一個清晰的路線圖，你可以直接在 Github 上看到。由於該項目是相當新的，仍在進行中的工作沒有貢獻指南，但你可以自由的打開任何問題和公關。

05 Gridsome

Gridsome 與 VuePress 有許多相似之處，但它採用了一種不同的非常強大的方法來處理數據源。它允許你連接並使用應用中的許多不同類型的數據, 然後將這些數據統一到一個 GraphQL 層中。基本上，Gridsome 的前端功能用 Vue，數據管理用 GraphQL 。

工作方式可以概括爲以下三個步驟:

你提供 Markdown 、JSON、YAML 或 CVS 數據格式的內容，或者從 WordPress 或 Drupal 等 CMS 導入內容；

內容轉化爲一個 GraphQL 層，提供集中的數據管理；

然後用這些數據用 Vue 構建你的應用。

在開發方面，文檔有一個清晰的路線圖、一個描述良好的更改日誌和一個貢獻指南。投稿是一個不錯的選擇。

06 UI 組件

Vuetify

Vuetify 根據 MaterialDesign 規範提供了大量精心製作的組件 (80 +)。Vueti fy 結合了 Vue. js 和 Material 的所有優點。該框架是與 RTL 和 VueCLI - 3 兼容。Vuetify 的所有組件都有很好的記錄, 也有清晰的示例。它與 Vue 的服務器端渲染（SSR）一起工作。Vuetify 支持所有現代網絡瀏覽器——甚至是 IE11 和 Safari9 +(使用多功能填充)。它還提供了現成的項目腳手架, 這樣您就可以用一個命令開始構建您的 Vue. js 應用程序。

它提供了一組基於材料設計的組件, 例如:

· 按鈕；

· 投入；

· 卡片；

· 表，

· 清單。

Vuetify 背後有一個充滿活力的社區, 有超過 500 個貢獻者, 他們創建了許多 Vuetify 插件。它具有成爲一個好的開源的所有主要組件：廣泛的文檔、貢獻指南、問題管理。但在我們看來，這很難做出貢獻，因爲社區已經很大了。

07 Buefy

Buefy 基於 Bulma 爲 Vue. js 提供了輕量級的 UI 組件。Buefy 有兩個核心原則：讓事情簡單化，輕量化。這也解釋了爲什麼它唯一的依賴是 Vue 和 Bulma 。雖然它只有 40 多個組件，但它爲你提供了隨時可用的移動優先和響應式的 UI 組件。

特點：

· 支持 MaterialDesign 圖標和 FontAwesome ;

· 非常輕便，除了 Vue& Bu lma 之外沒有內部依賴；

· 約 88KB min + gzip ;

· 語義代碼輸出。

**08 VueMaterial **

VUEMaterial 簡單，輕巧，完全按照 GoogleMaterial Design 規範建造。VUE 材料提供超過 56 個組件來構建不同類型的佈局。一個偉大的事情是材料設計框架有真正徹底的文檔。該框架非常輕量級，包含完整的組件，完全符合 GoogleMaterial Design 準則。這種設計適合每一個屏幕，並支持每一個現代瀏覽器。

路線圖、貢獻指南、好的文檔和更新日誌都在這裏。對於喜歡 UI 項目的開發者來說，是一個不錯的選擇。

09 應用

Koel

Koel 是一個個人音樂流媒體服務，你可以根據你的需要定製。客戶端用 Vue 編寫，後端用 Laravel 編寫。koel 以 web 開發者爲目標, 採用了一些更現代化的 web 技術, 比如 flexbox 、音頻和拖放 api 等等。

這個項目在 Github 上相當受歡迎，有 52 個貢獻者。不幸的是，沒有詳細的貢獻指南，但是作者在 Github 上寫道，在你提交任何東西之前，你需要打開一個問題。還有一個通過 Opencollective 贊助該項目的選項。

我們喜歡這個項目背後的想法，使一個流媒體服務，將由社區開發。因此，如果你熱愛音樂，想要提高自己的 Vue 技能，投稿會是一個不錯的選擇。

10 Eagle.js

Eagle. js 是使用 Vue 構建的強大、靈活、獨特的幻燈片顯示系統。它允許你在演示文稿中創建易於重用的組件、幻燈片和樣式。它還支持動畫，主題，和互動小部件，這是偉大的網頁演示。

使用這個庫可以做的最重要的事情之一是將幻燈片放在單獨的文件中，然後在其他幻燈片顯示中重用它。你還可以將特定幻燈片顯示的幻燈片導入另一個幻燈片。創建者還提供了幾個模板，可以輕鬆地開始開發。

這個項目有一個貢獻指南，裏面有你可以提供幫助的想法。我們認爲這是一個值得花時間做的好項目：它真的幫助了很多人做演示。此外, 在 Eagle 的幫助下, 開始學習 Vue 很容易。

11 工具包

Nuxt.js

Nuxt 是一個用於構建通用應用程序的簡單而直接的框架: 服務器呈現的應用、單頁應用、漸進式 Web 應用，或者只是將其用作靜態站點生成器。它也是模塊化的，所以你可以只使用你的 apage 所需要的模塊簡而言之, Nu xt 將您從構建和優化您的 apage 的工作中拯救出來 Nuxt. js 具有模塊化的架構, 有 50 多個模塊可供選擇。

特點：

· 熱代碼重載；

· 服務器端渲染或單頁應用程序或靜態生成，您選擇；

· 使用 nuxt. config . js 文件可配置；

· 每個頁面的代碼拆分；

· 用 layouts / 目錄定製佈局；

· 只加載關鍵的 CSS（頁面級）。

Nuxt 成爲 Vue 開發不可分割的一部分，有很多貢獻者和廣泛的社區。我們會選擇這個工具的貢獻, 知道社區將幫助你的技能發展, 並教一些新的東西。

12 Quasar

Quasar 是一個通用的、Vue 支持的框架，允許您使用相同的代碼庫爲不同平臺編寫應用程序：SPA、PWA、SSR 應用程序、混合移動應用程序或多平臺桌面應用程序。類星體有多達 81 個組件。

有一個好的文檔和大量的組件設計的性能和響應。Quasar 在默認情況下集成了最佳實踐（HTML/ CSS / JS 縮小、緩存破壞、樹搖動、源映射、延遲加載的代碼拆分、ES6 傳輸、代碼鏈接、可訪問性），因此你可以主要關注應用的功能。它還提供了一個 cli 工具, 用於輕鬆構建新項目的支架。

該框架有一個很棒的社區，支持聊天和論壇，加上明顯的貢獻指南。此外, 你可以通過捐錢來支持該工具。

13 BootstrapVue

引導 Vue 是一個基於引導庫的 UI 工具包。它簡單地用 Vue 代碼替換常規引導組件中的 JavaScript。使用 BootstrapVue，你可以使用 Vue.js 和世界上最流行的前端 CSS 庫 - Bootstrapv4 在 Web 上構建響應性強、移動第一和 ARIA 可訪問的項目。它還可以輕鬆地與 Nuxt.js 集成。

文檔是廣泛的, 再加上社區的支持是強大的不和諧, 使它成爲一個安全的選擇, 有人開始一個項目, 並作出貢獻。

14 開發人員工具

Statusfy

Statusfy 是一個完全開源的狀態頁面系統。Statusfy 站點是一個 Web 應用程序，創建於 Eleventy 、Vue、Nuxt. js 和 TailwindCSS 之上。

這很酷，因爲：

·Markdown 支持;

· 它是一個漸進式網絡應用程序；

· 多語言支持;

· 輕鬆定製。

在社區管理和支持方面，這款產品有社區聊天、衆多教程、提示、更新和博客。它也有一個廣泛的文件和貢獻指南。

我們會推薦這個項目的貢獻，因爲它是一個真正偉大的工具，使開發人員的生活真的很容易。此外, 您還將熟悉 Vue 周圍的所有主要技術。

15 Cachet

Cachet 是一個強大的開源狀態頁面系統，用 Vue 和 Bootstrap 製作。它內置了 10 種語言。Cachet 與一個簡單（但功能強大）的 JSONAPI 捆綁在一起。此外，通過 Cachet，你可以提前安排活動。在儀表板中, 你可以設置指標——一種測量某些東西的方法, 無論是正常運行時間、錯誤率還是完全隨機的東西。

Slack 裏有一個相當大的社區，貢獻者非常活躍。開始爲開源社區做貢獻是一個不錯的選擇——活躍的社區，中等規模的項目，好主意。

16 VeeValidate

VeeValidate 是一個基於模板的 Vue. js 驗證框架，允許你驗證輸入和顯示錯誤。

由於它是基於模板的，你只需要爲每個輸入指定當值更改時應該使用哪種驗證器。錯誤將自動生成的 40 + 地區支持。很多規則都是開箱即用的。

特點：

· 熟悉且易於設置的基於模板的驗證；

·i18n 支持和錯誤消息在 40 + 地區;

· 異步和自定義規則支持；

· 用 TypeScript 編寫；

· 沒有依賴。

VeeValidate 處理表單驗證的主要痛點，並以最靈活的方式處理它們：

· 能夠爲你的用戶設計複雜的用戶體驗；

· 大多數常見的驗證是內置的；

· 跨領域驗證；

· 用於增強窗體的可訪問性和樣式的實用程序；

· 本地化是內置到核心。

團隊歡迎每個人爲項目做出貢獻，並有一個很好的文檔和貢獻指南。它也有一些偉大的例子和偉大的社區。

結論

我們收集了 Vue 上最有用、最成熟的開源項目。我們想再次指出：首先，在選擇一個供資項目之前，要注意以下事項：文檔和貢獻指南還有，選擇自己最喜歡的項目，不管是否熱門。如果您希望我們在這個集合中包含任何其他工具, 請給我們寫信。我們希望您能分享這篇文章，以幫助人們瞭解偉大的開源項目。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/KyrXFTVe7wtBwHp89KOtzA