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

• **該框架非常小。**約為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 生態(tài)系統(tǒng)中所涉及到的其他庫和插件。

1.ViewUI

??View UI，即原先的 iView，是一套基于 Vue.js 的開源 UI 組件庫，主要服務(wù)于 PC 界面的中后臺(tái)產(chǎn)品。

2.Vue.js Modal

??Vue.js 模態(tài)框（Modal）是一個(gè)易用、高度可定制化的Vue.js模態(tài)框組件庫，支持SSR。

3.Mint UI

??Mint UI 由餓了么前端團(tuán)隊(duì)推出的 Mint UI，是一個(gè)基于 Vue.js 的移動(dòng)端組件庫。Mint-UI 包含豐富的 CSS 和 JS 組件，能夠滿足日常的移動(dòng)端開發(fā)需要。通過它，可以快速構(gòu)建出風(fēng)格統(tǒng)一的頁面，提升開發(fā)效率。

4.Vuetify

??一款非常精致的UI框架,它提供了很多常用的組件,依靠Material Design的設(shè)計(jì)優(yōu)勢(shì),讓你無需編寫一行css代碼就可以得到非常美觀的界面功能。

5.Buefy

??Buefy 基于 Bulma 和 Vue.js 的輕量級(jí)UI組件，它提供了即裝即用的輕量級(jí)組件。

特性：

• 使得你目前的 Bulma 主題/變量很簡單

• 支持材質(zhì)設(shè)計(jì)圖標(biāo)和 FontAwesome

• 除了 Vue＆Bulma 以外，沒有任何內(nèi)部依賴關(guān)系

• 約60KB min + gzip（含 Bulma）

• 語義代碼輸出

• 遵循 Bulma 設(shè)計(jì)和一些 Material Design UX

• 關(guān)注可用性和性能，而不是過度動(dòng)畫

6.Vue Material

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

7.Nuxt.js

??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ū)。

8.Quasar

??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)目。

9.Bootstrap Vue

??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)目。

10.Statusfy

??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ì)的的文檔。

結(jié)尾

了解更多，請(qǐng)點(diǎn)擊：https://www.bilibili.com/video/BV1jy4y1S7PS/

作者：Github導(dǎo)航站
鏈接：https://juejin.cn/post/6908927786707222535
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

標(biāo)簽：