16 個(gè) Vue 開(kāi)發(fā)者必須要知道的點(diǎn)【值得收藏】

01 CMSand Generators

頁(yè)面工具包



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

該產(chǎn)品具有CMS的所有主要和高級(jí)功能：

·可定制的分析儀表板與網(wǎng)站性能;

·網(wǎng)站內(nèi)容編輯頁(yè)面；

·內(nèi)置博客；

·HTML和Markdown 編輯器;

·文件管理器；

·用戶(hù)角色管理。

還有一些東西和特點(diǎn)對(duì)開(kāi)發(fā)者特別有用。該產(chǎn)品使用簡(jiǎn)單的ORM、模塊化架構(gòu)和包管理構(gòu)建。還有一個(gè)內(nèi)置的調(diào)試工具欄，可以幫助開(kāi)發(fā)人員監(jiān)視性能、路由、數(shù)據(jù)庫(kù)查詢(xún)和調(diào)試內(nèi)部系統(tǒng)事件、擴(kuò)展甚至可以添加自己的功能。另外，也可以使用CLI執(zhí)行系統(tǒng)更新、安裝和卸載擴(kuò)展和主題，以及直接從終端清除緩存。

該產(chǎn)品有一個(gè)強(qiáng)大的貢獻(xiàn)指南，團(tuán)隊(duì)歡迎人們來(lái)修復(fù)錯(cuò)誤，翻譯或擴(kuò)展CMS的功能。社區(qū)沒(méi)有那么大，但非常發(fā)達(dá)，熱心幫助新人。

因此,這是一個(gè)非常強(qiáng)大的產(chǎn)品,具有非常全面的文檔和透明的貢獻(xiàn)指南。開(kāi)啟開(kāi)源世界之路的絕佳選擇。

02 Vuepress














VuePress 是一個(gè)由Vue. js 作者EvanYou 創(chuàng)建的基于Vue的靜態(tài)站點(diǎn)生成器。在VuePress 幫助下，網(wǎng)站創(chuàng)建使用VueRouter 、Vue和webpack 。最初，該產(chǎn)品是作為編寫(xiě)技術(shù)文檔的工具而創(chuàng)建的，但現(xiàn)在它是一個(gè)小型、緊湊、功能強(qiáng)大的headless CMS 。在VuePress 中你用Markdown 寫(xiě)內(nèi)容，然后轉(zhuǎn)換成預(yù)渲染的靜態(tài)HTML文件。

該項(xiàng)目有一個(gè)組織良好的捐款指南，工作流程透明。它還有很好的問(wèn)題管理功能。社區(qū)有超過(guò)300個(gè)活躍貢獻(xiàn)者,他們可以支持你。這是你開(kāi)始為開(kāi)源項(xiàng)目做貢獻(xiàn)的好選擇。

03 Vue店面










Vuestorefront是一款面向電子商務(wù)的PWA，可以連接到幾乎任何電子商務(wù)后端：它使用了headless 架構(gòu)。這包括流行的BigCommerce 平臺(tái)、Magento、Shopware 等。VueStorefront 的一些優(yōu)勢(shì)包括移動(dòng)優(yōu)先的方法、服務(wù)器端渲染（有利于SEO）和離線模式。

該產(chǎn)品擁有一個(gè)發(fā)達(dá)的社區(qū)：Slack中約有2000名開(kāi)發(fā)者和180多名活躍貢獻(xiàn)者。這是特別有價(jià)值的，因?yàn)閳F(tuán)隊(duì)有一個(gè)清晰的路線圖，所以你作為一個(gè)貢獻(xiàn)者可以選擇你可以做的任務(wù)?？傊@是一個(gè)非常有趣的，支持和需要在上面花時(shí)間的產(chǎn)品。

04 Vuegg



Vuegg 允許您將組件直接拖放到可視化編輯器中，并根據(jù)你的選擇移動(dòng)它們的大小，從而構(gòu)建Vue. js 項(xiàng)目。這個(gè)項(xiàng)目的目的是合并設(shè)計(jì)和原型到一個(gè)單一的過(guò)程。

顯著特征:

·通過(guò)拖放組件和移動(dòng)/調(diào)整它們的大小來(lái)模擬/還原它們；

·支持標(biāo)準(zhǔn)鼠標(biāo)和鍵盤(pán)組合;

·響應(yīng)式預(yù)覽(手機(jī)、平板電腦、網(wǎng)絡(luò));

·一組基本的HTML5元素;

·材料設(shè)計(jì)組件（vue- mdc - adapter ）；

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

這個(gè)項(xiàng)目有一個(gè)清晰的路線圖，你可以直接在Github上看到。由于該項(xiàng)目是相當(dāng)新的，仍在進(jìn)行中的工作沒(méi)有貢獻(xiàn)指南，但你可以自由的打開(kāi)任何問(wèn)題和公關(guān)。

05 Gridsome



Gridsome 與VuePress有許多相似之處，但它采用了一種不同的非常強(qiáng)大的方法來(lái)處理數(shù)據(jù)源。它允許你連接并使用應(yīng)用中的許多不同類(lèi)型的數(shù)據(jù),然后將這些數(shù)據(jù)統(tǒng)一到一個(gè)GraphQL 層中?；旧?，Gridsome 的前端功能用Vue，數(shù)據(jù)管理用GraphQL 。

工作方式可以概括為以下三個(gè)步驟:

你提供Markdown 、JSON、YAML或CVS數(shù)據(jù)格式的內(nèi)容，或者從WordPress或Drupal等CMS導(dǎo)入內(nèi)容；

內(nèi)容轉(zhuǎn)化為一個(gè)GraphQL 層，提供集中的數(shù)據(jù)管理；

然后用這些數(shù)據(jù)用Vue構(gòu)建你的應(yīng)用。

在開(kāi)發(fā)方面，文檔有一個(gè)清晰的路線圖、一個(gè)描述良好的更改日志和一個(gè)貢獻(xiàn)指南。投稿是一個(gè)不錯(cuò)的選擇。

06 UI組件

Vuetify



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

它提供了一組基于材料設(shè)計(jì)的組件,例如:

·按鈕；

·投入；

·卡片；

·表，

·清單。

Vuetify 背后有一個(gè)充滿(mǎn)活力的社區(qū),有超過(guò)500個(gè)貢獻(xiàn)者,他們創(chuàng)建了許多Vuetify 插件。它具有成為一個(gè)好的開(kāi)源的所有主要組件：廣泛的文檔、貢獻(xiàn)指南、問(wèn)題管理。但在我們看來(lái)，這很難做出貢獻(xiàn)，因?yàn)樯鐓^(qū)已經(jīng)很大了。

07 Buefy



Buefy基于Bulma為Vue. js 提供了輕量級(jí)的UI組件。Buefy有兩個(gè)核心原則：讓事情簡(jiǎn)單化，輕量化。這也解釋了為什么它唯一的依賴(lài)是Vue和Bulma 。雖然它只有40多個(gè)組件，但它為你提供了隨時(shí)可用的移動(dòng)優(yōu)先和響應(yīng)式的UI組件。

特點(diǎn)：

·支持MaterialDesign 圖標(biāo)和FontAwesome ;

·非常輕便，除了Vue& Bu lma 之外沒(méi)有內(nèi)部依賴(lài)；

·約88KB min + gzip ;

·語(yǔ)義代碼輸出。

08 VueMaterial



VUEMaterial簡(jiǎn)單，輕巧，完全按照GoogleMaterial Design規(guī)范建造。VUE材料提供超過(guò)56個(gè)組件來(lái)構(gòu)建不同類(lèi)型的布局。一個(gè)偉大的事情是材料設(shè)計(jì)框架有真正徹底的文檔。該框架非常輕量級(jí)，包含完整的組件，完全符合GoogleMaterial Design準(zhǔn)則。這種設(shè)計(jì)適合每一個(gè)屏幕，并支持每一個(gè)現(xiàn)代瀏覽器。

路線圖、貢獻(xiàn)指南、好的文檔和更新日志都在這里。對(duì)于喜歡UI項(xiàng)目的開(kāi)發(fā)者來(lái)說(shuō)，是一個(gè)不錯(cuò)的選擇。






09 應(yīng)用

Koel



Koel是一個(gè)個(gè)人音樂(lè)流媒體服務(wù)，你可以根據(jù)你的需要定制。客戶(hù)端用Vue編寫(xiě)，后端用Laravel編寫(xiě)。koel以web開(kāi)發(fā)者為目標(biāo),采用了一些更現(xiàn)代化的web技術(shù),比如flexbox 、音頻和拖放api等等。

這個(gè)項(xiàng)目在Github上相當(dāng)受歡迎，有52個(gè)貢獻(xiàn)者。不幸的是，沒(méi)有詳細(xì)的貢獻(xiàn)指南，但是作者在Github上寫(xiě)道，在你提交任何東西之前，你需要打開(kāi)一個(gè)問(wèn)題。還有一個(gè)通過(guò)Opencollective 贊助該項(xiàng)目的選項(xiàng)。

我們喜歡這個(gè)項(xiàng)目背后的想法，使一個(gè)流媒體服務(wù)，將由社區(qū)開(kāi)發(fā)。因此，如果你熱愛(ài)音樂(lè)，想要提高自己的Vue技能，投稿會(huì)是一個(gè)不錯(cuò)的選擇。

10 Eagle.js



Eagle. js 是使用Vue構(gòu)建的強(qiáng)大、靈活、獨(dú)特的幻燈片顯示系統(tǒng)。它允許你在演示文稿中創(chuàng)建易于重用的組件、幻燈片和樣式。它還支持動(dòng)畫(huà)，主題，和互動(dòng)小部件，這是偉大的網(wǎng)頁(yè)演示。

使用這個(gè)庫(kù)可以做的最重要的事情之一是將幻燈片放在單獨(dú)的文件中，然后在其他幻燈片顯示中重用它。你還可以將特定幻燈片顯示的幻燈片導(dǎo)入另一個(gè)幻燈片。創(chuàng)建者還提供了幾個(gè)模板，可以輕松地開(kāi)始開(kāi)發(fā)。

這個(gè)項(xiàng)目有一個(gè)貢獻(xiàn)指南，里面有你可以提供幫助的想法。我們認(rèn)為這是一個(gè)值得花時(shí)間做的好項(xiàng)目：它真的幫助了很多人做演示。此外,在Eagle的幫助下,開(kāi)始學(xué)習(xí)Vue很容易。

11 工具包

Nuxt.js



Nuxt是一個(gè)用于構(gòu)建通用應(yīng)用程序的簡(jiǎn)單而直接的框架:服務(wù)器呈現(xiàn)的應(yīng)用、單頁(yè)應(yīng)用、漸進(jìn)式Web應(yīng)用，或者只是將其用作靜態(tài)站點(diǎn)生成器。它也是模塊化的，所以你可以只使用你的apage所需要的模塊簡(jiǎn)而言之,Nu xt 將您從構(gòu)建和優(yōu)化您的apage的工作中拯救出來(lái)Nuxt. js 具有模塊化的架構(gòu),有50多個(gè)模塊可供選擇。

特點(diǎn)：

·熱代碼重載；

·服務(wù)器端渲染或單頁(yè)應(yīng)用程序或靜態(tài)生成，您選擇；

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

·每個(gè)頁(yè)面的代碼拆分；

·用layouts/目錄定制布局；

·只加載關(guān)鍵的CSS（頁(yè)面級(jí)）。

Nuxt成為Vue開(kāi)發(fā)不可分割的一部分，有很多貢獻(xiàn)者和廣泛的社區(qū)。我們會(huì)選擇這個(gè)工具的貢獻(xiàn),知道社區(qū)將幫助你的技能發(fā)展,并教一些新的東西。

12 Quasar



Quasar是一個(gè)通用的、Vue支持的框架，允許您使用相同的代碼庫(kù)為不同平臺(tái)編寫(xiě)應(yīng)用程序：SPA、PWA、SSR應(yīng)用程序、混合移動(dòng)應(yīng)用程序或多平臺(tái)桌面應(yīng)用程序。類(lèi)星體有多達(dá)81個(gè)組件。

有一個(gè)好的文檔和大量的組件設(shè)計(jì)的性能和響應(yīng)。Quasar在默認(rèn)情況下集成了最佳實(shí)踐（HTML/ CSS / JS 縮小、緩存破壞、樹(shù)搖動(dòng)、源映射、延遲加載的代碼拆分、ES6 傳輸、代碼鏈接、可訪問(wèn)性），因此你可以主要關(guān)注應(yīng)用的功能。它還提供了一個(gè)cli工具,用于輕松構(gòu)建新項(xiàng)目的支架。

該框架有一個(gè)很棒的社區(qū)，支持聊天和論壇，加上明顯的貢獻(xiàn)指南。此外,你可以通過(guò)捐錢(qián)來(lái)支持該工具。

13 BootstrapVue



引導(dǎo)Vue是一個(gè)基于引導(dǎo)庫(kù)的UI工具包。它簡(jiǎn)單地用Vue代碼替換常規(guī)引導(dǎo)組件中的JavaScript。使用BootstrapVue，你可以使用Vue.js和世界上最流行的前端CSS庫(kù)-Bootstrapv4在Web上構(gòu)建響應(yīng)性強(qiáng)、移動(dòng)第一和ARIA可訪問(wèn)的項(xiàng)目。它還可以輕松地與Nuxt.js集成。

文檔是廣泛的,再加上社區(qū)的支持是強(qiáng)大的不和諧,使它成為一個(gè)安全的選擇,有人開(kāi)始一個(gè)項(xiàng)目,并作出貢獻(xiàn)。

14 開(kāi)發(fā)人員工具

Statusfy



Statusfy 是一個(gè)完全開(kāi)源的狀態(tài)頁(yè)面系統(tǒng)。Statusfy 站點(diǎn)是一個(gè)Web應(yīng)用程序，創(chuàng)建于Eleventy 、Vue、Nuxt. js 和TailwindCSS 之上。

這很酷，因?yàn)椋?br>
·Markdown 支持;

·它是一個(gè)漸進(jìn)式網(wǎng)絡(luò)應(yīng)用程序；

·多語(yǔ)言支持;

·輕松定制。

在社區(qū)管理和支持方面，這款產(chǎn)品有社區(qū)聊天、眾多教程、提示、更新和博客。它也有一個(gè)廣泛的文件和貢獻(xiàn)指南。

我們會(huì)推薦這個(gè)項(xiàng)目的貢獻(xiàn)，因?yàn)樗且粋€(gè)真正偉大的工具，使開(kāi)發(fā)人員的生活真的很容易。此外,您還將熟悉Vue周?chē)乃兄饕夹g(shù)。

15 Cachet



Cachet是一個(gè)強(qiáng)大的開(kāi)源狀態(tài)頁(yè)面系統(tǒng)，用Vue和Bootstrap制作。它內(nèi)置了10種語(yǔ)言。Cachet與一個(gè)簡(jiǎn)單（但功能強(qiáng)大）的JSONAPI 捆綁在一起。此外，通過(guò)Cachet，你可以提前安排活動(dòng)。在儀表板中,你可以設(shè)置指標(biāo)——一種測(cè)量某些東西的方法,無(wú)論是正常運(yùn)行時(shí)間、錯(cuò)誤率還是完全隨機(jī)的東西。

Slack里有一個(gè)相當(dāng)大的社區(qū)，貢獻(xiàn)者非?；钴S。開(kāi)始為開(kāi)源社區(qū)做貢獻(xiàn)是一個(gè)不錯(cuò)的選擇——活躍的社區(qū)，中等規(guī)模的項(xiàng)目，好主意。

16 VeeValidate



VeeValidate 是一個(gè)基于模板的Vue. js 驗(yàn)證框架，允許你驗(yàn)證輸入和顯示錯(cuò)誤。

由于它是基于模板的，你只需要為每個(gè)輸入指定當(dāng)值更改時(shí)應(yīng)該使用哪種驗(yàn)證器。錯(cuò)誤將自動(dòng)生成的40+地區(qū)支持。很多規(guī)則都是開(kāi)箱即用的。

特點(diǎn)：

·熟悉且易于設(shè)置的基于模板的驗(yàn)證；

·i18n支持和錯(cuò)誤消息在40+地區(qū);

·異步和自定義規(guī)則支持；

·用TypeScript編寫(xiě)；

·沒(méi)有依賴(lài)。

VeeValidate 處理表單驗(yàn)證的主要痛點(diǎn)，并以最靈活的方式處理它們：

·能夠?yàn)槟愕挠脩?hù)設(shè)計(jì)復(fù)雜的用戶(hù)體驗(yàn)；

·大多數(shù)常見(jiàn)的驗(yàn)證是內(nèi)置的；

·跨領(lǐng)域驗(yàn)證；

·用于增強(qiáng)窗體的可訪問(wèn)性和樣式的實(shí)用程序；

·本地化是內(nèi)置到核心。

團(tuán)隊(duì)歡迎每個(gè)人為項(xiàng)目做出貢獻(xiàn)，并有一個(gè)很好的文檔和貢獻(xiàn)指南。它也有一些偉大的例子和偉大的社區(qū)。

結(jié)論

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

來(lái)源：Duing（ID：duyi-duing）

https://dev.to/flatlogic/top-16-vue-open-source-projects-227a


作者：Duing


歡迎關(guān)注微信公眾號(hào) ：前端開(kāi)發(fā)愛(ài)好者


添加好友備注【進(jìn)階學(xué)習(xí)】拉你進(jìn)技術(shù)交流群