為什么我們要關(guān)注Vue？

Vue是一個用于構(gòu)建用戶界面的JavaScript框架。值得關(guān)注的是，它在沒有谷歌和Facebook的支持下獲得了大量的人氣。

Vue是結(jié)合react和angular的最好的方法，并且擁有一個有凝聚力的，活躍的，能夠應(yīng)對開發(fā)問題的大型社區(qū)。相同的社區(qū)能夠不斷地提出新的方法去解決常規(guī)的問題。隨著貢獻(xiàn)量的增加，可用的數(shù)據(jù)以及庫的數(shù)量也會隨之增加。

使用Vue的益處

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

Vue支持基于組件的方法來構(gòu)建Web應(yīng)用程序;

文檔詳細(xì)。開發(fā)人員總是喜歡使用帶有詳細(xì)文檔的框架，因為他們編寫第一個應(yīng)用程序總是很容易；

通俗易懂。由于Vue. js 結(jié)構(gòu)簡單,用戶可以很容易地將其添加到Web項目中。它有一個定義良好的體系結(jié)構(gòu)來保存您的數(shù)據(jù)。生命周期法與定制法分離；

集成簡單。你可以簡單地通過CDN添加Vue. js –無需設(shè)置節(jié)點(diǎn)和npm開始使用Vue. js 。你也可以使用它作為一個偉大的jQuery替代品；

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

使用Vue的項目

如果你想創(chuàng)建輕量級且易于修復(fù)的應(yīng)用程序，那么Vue. js 是一個不錯的選擇。

學(xué)習(xí)曲線相當(dāng)?shù)?，允許在短時間內(nèi)掌握框架，然后繼續(xù)進(jìn)行應(yīng)用程序開發(fā)。我們建議在以下情況下使用Vue:

如果您想構(gòu)建單頁應(yīng)用程序或漸進(jìn)式WebApp (你可以使用nuxt. js 框架);

你想讓你的團(tuán)隊學(xué)習(xí)新的技術(shù)，Vue是一個很好的選擇；

快速構(gòu)建MVP；

你想建立一個SEO友好的應(yīng)用程序;

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

Vue的受歡迎度

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

開放源碼項目的評價標(biāo)準(zhǔn)

文檔。任何好的項目都應(yīng)該有全面的文檔；

如何很好地描述提交的規(guī)則。如果開源項目想要增加貢獻(xiàn)者的數(shù)量，這是必不可少的；

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

項目是否有路線圖？路線圖幫助貢獻(xiàn)者選擇他們將首先開發(fā)的特性；

Github上的星星數(shù)。這一標(biāo)準(zhǔn)在一定程度上反映了項目的質(zhì)量；

成熟度。分析項目開發(fā)并試圖決定應(yīng)該使用什么作為工具來獲得結(jié)果，需要小心選擇尚未成熟或沒有十足把握的工具；

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

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

·CMS和生成器；

·UI組件；

·應(yīng)用程序；

·工具包;

·開發(fā)者工具。

Vue開源項目

我們列出了你應(yīng)該了解的最重要的工具和庫,并最終在Vue. js 項目中使用和貢獻(xiàn)。與許多其他文章只列出UI組件庫不同，我們在Vue生態(tài)系統(tǒng)中包含了其他庫和插件。

我們的選擇是基于他們的有用性、有效性、文檔、想法和貢獻(xiàn)指南。

01?CMSand Generators

頁面工具包

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

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

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

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

·內(nèi)置博客；

·HTML和Markdown 編輯器;

·文件管理器；

·用戶角色管理。

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

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

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

02?Vuepress

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

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

03?Vue店面

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

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

04?Vuegg

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

顯著特征:

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

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

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

·一組基本的HTML5元素;

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

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

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

05?Gridsome

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

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

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

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

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

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

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)成的項目腳手架,這樣您就可以用一個命令開始構(gòu)建您的Vue. js 應(yīng)用程序。

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

·按鈕；

·投入；

·卡片；

·表，

·清單。

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

07?Buefy

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

特點(diǎn)：

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

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

·約88KB min + gzip ;

·語義代碼輸出。

08?VueMaterial

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

路線圖、貢獻(xiàn)指南、好的文檔和更新日志都在這里。對于喜歡UI項目的開發(fā)者來說，是一個不錯的選擇。

09?應(yīng)用

Koel

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

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

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

10?Eagle.js

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

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

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

11?工具包

Nuxt.js

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

特點(diǎn)：

·熱代碼重載；

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

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

·每個頁面的代碼拆分；

·用layouts/目錄定制布局；

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

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

12?Quasar

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

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

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

13?BootstrapVue

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

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

14?開發(fā)人員工具

Statusfy

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

這很酷，因為：

·Markdown 支持;

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

·多語言支持;

·輕松定制。

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

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

15?Cachet

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

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

16?VeeValidate

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

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

特點(diǎn)：

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

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

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

·用TypeScript編寫；

·沒有依賴。

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

·能夠為你的用戶設(shè)計復(fù)雜的用戶體驗；

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

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

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

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

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

結(jié)論

我們收集了Vue上最有用、最成熟的開源項目。我們想再次指出：首先，在選擇一個供資項目之前，要注意以下事項：文檔和貢獻(xiàn)指南還有，選擇自己最喜歡的項目，不管是否熱門。

以上就是本次分享的全部內(nèi)容，想學(xué)習(xí)更多web技巧，歡迎持續(xù)關(guān)注六星云課堂！