作者：前端瓶子君

轉(zhuǎn)發(fā)鏈接：https://mp.weixin.qq.com/s/W8Fvn1ubcKwjo-C7LQvU7w

前言

Vue 結(jié)合了 React 和 Angular 的優(yōu)點(diǎn)，并且有著團(tuán)結(jié)、活躍且龐大的社區(qū)，可以幫助解決開發(fā)中遇到的問題。開源社區(qū)不斷提出解決問題的新方法。工具和庫的數(shù)量也貢獻(xiàn)量不斷的增加。

使用 Vue 的好處

• 該框架非常小。約為18–21KB；
• Vue 支持用基于組件的方法來構(gòu)建 Web 應(yīng)用；
• 詳細(xì)的文檔。這對(duì)于初學(xué)者來說很容易上手；
• 易于理解。由于其結(jié)構(gòu)簡單，你可以輕松地把 Vue.js 添加到自己的 Web 項(xiàng)目里。它憑借定義良好的體系結(jié)構(gòu)來保存你的數(shù)據(jù)。生命周期方法和自定義方法是分開的；
• 輕松的集成。你可以通過 CDN 來輕松添加 Vue.js，不依賴 Node.js 和 npm 環(huán)境就可以用。完全可以把它當(dāng)成替代 jQuery 的絕佳選擇；
• 出色的工具。 通過 Vue CLI ，你可以使用內(nèi)置的路由、狀態(tài)存儲(chǔ)、Lint、單元測(cè)試、css預(yù)處理器、Typescript、PWA 等來啟動(dòng)新項(xiàng)目。此外，Vue CLI 還提供了用于管理項(xiàng)目的UI。

Vue開源項(xiàng)目

下面匯總了一些非常流行的工具和庫，并包括在 Vue 生態(tài)系統(tǒng)中所涉及到的其他庫和插件。

是根據(jù)其有用性、有效性、文檔、思想和貢獻(xiàn)指南進(jìn)行選擇的。

UI組件

Vuetify

網(wǎng)站： https://vuetifyjs.com/en/Github: https://github.com/vuetifyjs/vuetifyDemo: –License: MITGithub stars: 25.6k

Vuetify project

Vuetify 根據(jù)材料設(shè)計(jì)規(guī)范提供了大量的精制組件（80+）。Vuetify 結(jié)合了 Vue.js 和 Material 的所有優(yōu)點(diǎn)。該框架與 RTL 和 Vue CLI-3 兼容。Vuetify 的所有組件都有很好的文檔，也有清晰的示例。它可以用于 Vue 的服務(wù)器端渲染（SSR）。Vuetify 支持所有現(xiàn)代的 Web 瀏覽器，甚至包括 IE11 和 Safari 9+（帶有 polyfill）。它還帶有現(xiàn)成的項(xiàng)目支架，你可以通過一個(gè)命令開始構(gòu)建 Vue.js 應(yīng)用。

它根據(jù)材料設(shè)計(jì)提供了一組組件，例如：

• Buttons;
• Inputs;
• Cards;
• 輪播；
• Tables,
• 列表。

Vuetify 背后有一個(gè)充滿活力的社區(qū)，500 多個(gè)貢獻(xiàn)者創(chuàng)建了大量的 Vuetify 插件。它有優(yōu)質(zhì)開源項(xiàng)目的所有要素：廣泛的文檔，文稿指南，問題管理等。

Buefy

網(wǎng)站： https://buefy.org/Github: https://github.com/buefy/buefyDemo: https://buefy.org/expo/License: MITGithub stars: 7.6k

Buefy logo

Buefy 為基于 Bulma 的 Vue.js 提供了輕量級(jí)的 UI 組件。Buefy 有兩個(gè)核心原則：使事情簡單和輕巧。這就解釋了為什么 Vue 和 Bulma 是它唯一的依賴。盡管只有 40 多個(gè)組件，但它為你提供了開箱即用的移動(dòng)優(yōu)先和響應(yīng)式 UI 組件。

特性：

• 支持 Material Design 圖標(biāo)和 FontAwesome；
• 非常輕巧，除了 Vue 和 Bulma 之外，沒有任何內(nèi)部依賴；
• 約 88KB；
• 語義代碼輸出。

Vue Material

網(wǎng)站： https://vuematerial.io/Github: https://github.com/vuematerial/vue-materialDemo: –License: MITGithub stars: 8.8k

Vue Material project

Vue Material 簡單、輕巧，并且完全按照 google Material Design 規(guī)范構(gòu)建。Vue Material 提供了超過 56個(gè)組件來構(gòu)建不同類型的布局。Material Design Framework 擁有真正完整的文檔。該框架非常輕巧，具有完全符合Google Material Design 指南的所有組件。這種設(shè)計(jì)并支持所有的現(xiàn)代瀏覽器適合所有的屏幕。

工具包

Nuxt.js

網(wǎng)站： https://nuxtjs.org/Github： https://github.com/nuxt/nuxt.jsDemo: –License: MITGithub stars: 27.4k

Nuxt.js logo

Nuxt 是一個(gè)簡單而直接的框架，用于構(gòu)建通用程序，例如：服務(wù)器端渲染的應(yīng)用，單頁應(yīng)用，漸進(jìn)式 Web 應(yīng)用，或只是把它用作靜態(tài)站點(diǎn)生成器。它也是模塊化的，所以你只需使用程序所需的那些模塊即可。Nuxt 使你不必糾結(jié)于構(gòu)建和優(yōu)化程序的工作。Nuxt.js 具有模塊化架構(gòu)，有50多個(gè)模塊可供選擇。

特征：

• 自動(dòng)轉(zhuǎn)譯和打包（通過 webpack 和 babel）；
• 代碼熱加載；
• 可以選擇服務(wù)器端渲染、單頁應(yīng)用程序或靜態(tài)生成；
• 可通過 nuxt.config.js 文件進(jìn)行配置；
• 為每個(gè)頁面的頁代碼進(jìn)行拆分；
• 帶有 layouts/目錄的自定義布局；
• 僅加載關(guān)鍵的CSS（頁面級(jí)）。

Nuxt 成為 Vue 開發(fā)不可或缺的一部分，有許多貢獻(xiàn)者和廣泛的社區(qū)。

Quasar

網(wǎng)站： https://quasar.dev/Github： https://github.com/quasarframework/quasarDemo: –License: MITGithub stars: 14.8k

Quasar framework

Quasar 是一個(gè)基于 Vue 的通用框架，可讓你用相同的代碼庫為不同平臺(tái)編寫應(yīng)用程序：SPA，PWA，SSR 應(yīng)用，混合移動(dòng)應(yīng)用或多平臺(tái)桌面應(yīng)用。Quasar 包含多達(dá) 81 個(gè)組件。

這里有大量的文檔和的組件，這些組件在設(shè)計(jì)時(shí)都考慮了性能和響應(yīng)能力。Quasar 默認(rèn)情況下集成了最佳做法（html/CSS/JS最小化、緩存清除、tree shaking，源映射、帶有延遲加載的代碼拆分、ES6 生成，code-splitting、可訪問性等），所以你只需要把經(jīng)歷放在程序的功能上。它還提供了一個(gè) CLI 工具，用于輕松構(gòu)建新的項(xiàng)目。

Bootstrap Vue

網(wǎng)站： https://bootstrap-vue.org/Github: https://github.com/bootstrap-vue/bootstrap-vueDemo: https://bootstrap-vue.org/playLicense: MITGithub stars: 11.5k

Bootstrap Vue logo

Bootstrap Vue 是基于 Bootstrap 庫的 UI 套件。它只是用 Vue 代碼替換了常規(guī)的 Bootstrap 組件中的JAVAScript。借助 Bootstrap Vue，你可以使用 Vue.js 和世界上最受歡迎的前端 CSS 庫——Bootstrap v4 在 Web 上構(gòu)建響應(yīng)式、移動(dòng)優(yōu)先和 ARIA 可訪問的項(xiàng)目。它還可以輕松地與 Nuxt.js 集成。

文檔內(nèi)容豐富，加上強(qiáng)大的社區(qū)支持，這使你可以輕松的啟動(dòng)一個(gè)項(xiàng)目。

開發(fā)者工具

Statusfy

網(wǎng)站： https://aceforth.com/products/statusfyGithub: https://github.com/aceforth/statusfyDemo: –License: Apache License 2.0Github stars: 1.9k

Statusfy project

Statusfy 是一個(gè)完全開源的狀態(tài)頁面系統(tǒng)。Statusfy 網(wǎng)站是一個(gè) Web 應(yīng)用，基于 Eleventy、Vue、Nuxt.js 和 Tailwind CSS 創(chuàng)建。

它很酷，因?yàn)椋?/strong>

• Markdown 支持；
• 它是一個(gè)漸進(jìn)式 Web 應(yīng)用；
• 多國語言支持；
• 易于定制。

在社區(qū)管理和支持方面，該項(xiàng)目具有社區(qū)聊天功能，大量教程、技巧、更新和博客。它還有詳細(xì)的的文檔。

Cachet

網(wǎng)站： https://cachethq.io/Github： https://github.com/CachetHQ/CachetDemo: https://demo.cachethq.io/License: BSD 3-Clause “New” or “Revised” LicenseGithub stars: 11.1k

 

Cachet project

Cachet 是由 Vue 和Bootstrap 組成的功能強(qiáng)大的開源狀態(tài)頁面系統(tǒng)。它內(nèi)置了 10 種語言。Cachet 與簡單但功能強(qiáng)大的 JSON API 捆綁在一起。通過 Cachet 你可以提前安排事件。可以在信息中心內(nèi)設(shè)置指標(biāo)，這是一種衡量指標(biāo)的方法，無論是正常運(yùn)行時(shí)間，錯(cuò)誤率還是完全隨機(jī)的指標(biāo)。

Slack 有一個(gè)很大的社區(qū)，貢獻(xiàn)者非常活躍。

VeeValidate

網(wǎng)站： http://vee-validate.logaretm.com/Github： https://github.com/logaretm/vee-validateDemo: –License: MITGithub stars: 7.6k

 

VeeValidate

VeeValidate 是 Vue.js 的基于模板的驗(yàn)證框架，使你可以驗(yàn)證輸入并顯示錯(cuò)誤。

它是基于模板的，你只需要為每個(gè)輸入指定應(yīng)使用哪種驗(yàn)證器即可。系統(tǒng)會(huì)使用 40 多種語言環(huán)境自動(dòng)生成錯(cuò)誤。現(xiàn)成的規(guī)則非常多。

特性：

• 易于設(shè)置的基于模板的驗(yàn)證；
• i18n 支持 40 多個(gè)語言環(huán)境和錯(cuò)誤消息；
• 支持異步和自定義規(guī)則；
• 用 TypeScript 編寫；
• 無依賴性。

VeeValidate 解決了表單驗(yàn)證的主要難題，并以最靈活的方式解決了它們：

• 能夠?yàn)槟愕挠脩糁谱鲝?fù)雜的 UX；
• 最常見的驗(yàn)證是被內(nèi)置的；
• 跨領(lǐng)域驗(yàn)證；
• 用于增強(qiáng)表格的可訪問性和樣式的實(shí)用工具；
• 本地化內(nèi)置在內(nèi)核中。

團(tuán)隊(duì)歡迎任何人為該項(xiàng)目做出貢獻(xiàn)，并有著良好的文檔和貢獻(xiàn)指南。它還有幾個(gè)很不錯(cuò)的例子。

總結(jié)

以上是為大家收集的 Vue 最有用、最完善的開源項(xiàng)目，希望能夠?qū)δ阌兴鶐椭?/p>