Vue.js 是一個漸進(jìn)式 javascript 框架，用于構(gòu)建 UIS(用戶界面)和 SPA(單頁應(yīng)用程序)。UI 組件庫提高了我們的開發(fā)效率，增強(qiáng)了應(yīng)用的整體外觀、感覺、交互性和可訪問性，下面就來看看有哪些適用于 Vue 的 UI 組件庫。

1. Element UI

Element UI 是一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的桌面端組件庫。它是一個用于 Web 的 UI 組件庫 ，除了 Vue 之外，它還具有React 和 Angular的版本。

Element UI 的特性：

(1)一致性 Consistency

與現(xiàn)實(shí)生活一致： 與現(xiàn)實(shí)生活的流程、邏輯保持一致，遵循用戶習(xí)慣的語言和概念;

在界面中一致： 所有的元素和結(jié)構(gòu)需保持一致，比如：設(shè)計(jì)樣式、圖標(biāo)和文本、元素的位置等。

(2)反饋 Feedback

控制反饋： 通過界面樣式和交互動效讓用戶可以清晰的感知自己的操作;

頁面反饋： 操作后，通過頁面元素的變化清晰地展現(xiàn)當(dāng)前狀態(tài)。

(3)效率 Efficiency

簡化流程： 設(shè)計(jì)簡潔直觀的操作流程;

清晰明確： 語言表達(dá)清晰且表意明確，讓用戶快速理解進(jìn)而作出決策;

幫助用戶識別： 界面簡單直白，讓用戶快速識別而非回憶，減少用戶記憶負(fù)擔(dān)。

(4)可控 Controllability

用戶決策： 根據(jù)場景可給予用戶操作建議或安全提示，但不能代替用戶進(jìn)行決策;

結(jié)果可控： 用戶可以自由地進(jìn)行操作，包括撤銷、回退和終止當(dāng)前操作等。

GitHub(star：51.6k)：https://github.com/ElemeFE/element

2. Ant Design of Vue

Ant Design Vue 是使用 Vue 實(shí)現(xiàn)的遵循 Ant Design 設(shè)計(jì)規(guī)范的高質(zhì)量 UI 組件庫，用于開發(fā)和服務(wù)于企業(yè)級中后臺產(chǎn)品。

Ant Design of Vue 的特性：

• 提煉自企業(yè)級中后臺產(chǎn)品的交互語言和視覺風(fēng)格。
• 開箱即用的高質(zhì)量 Vue 組件。
• 共享 Ant Design of React 設(shè)計(jì)工具體系。

GitHub(star：16k)：https://github.com/vueComponent/ant-design-vue/

3. Vue Material

vue-material是一個建立在谷歌的Material Design基礎(chǔ)上的輕量級框架，是一個實(shí)現(xiàn)Google像素材料設(shè)計(jì)的Vue組件庫，它提供了適合所有現(xiàn)代Web瀏覽器的內(nèi)置動態(tài)主題的組件，它的API也簡單明了。

Vue Material 是一個輕量級的框架， 建立在谷歌的 Material Design 基礎(chǔ)上。設(shè)計(jì)強(qiáng)大的和美觀的web應(yīng)用并適用于不同的屏幕。

GitHub(star：9.6k)：https://github.com/vuematerial/vue-material

4. BootStrap Vue

采用 BootstrapVue 構(gòu)建響應(yīng)式、移動優(yōu)先、ARIA項(xiàng)目(Accessible Rich Internet Application，可訪問的富媒體應(yīng)用，即無障礙友好應(yīng)用)，基于 Vue.js 和世界全球最受歡迎的 CSS 前端框架 — Bootstrap v4。

BootstrapVue 擁有40多個可用插件和80多個自定義UI組件、指令以及300多個圖標(biāo)，全面兼容并符合 Bootstrap v4.4組件和網(wǎng)格系統(tǒng)規(guī)范，基于 Vue.js v2.6, 并具備廣泛和自動的 WAI-ARIA 可訪問性友好支持。

GitHub(star：13.7k)：https://github.com/bootstrap-vue/bootstrap-vue

5. Vuetify

Vuetify 是一個基于 Vue.js 精心打造 UI 組件庫，整套 UI 設(shè)計(jì)為 Material 風(fēng)格。能夠讓沒有任何設(shè)計(jì)技能的開發(fā)者創(chuàng)造出時尚的 Material 風(fēng)格界面。

Material Design 是 Google 推出的設(shè)計(jì)語言，顏色鮮艷、動畫效果突出，旨在為手機(jī)、平板電腦、臺式機(jī)和“其他平臺”提供更一致、更廣泛的“外觀和感覺”。

Vuetify 的特性：

• 所有組件遵從 Material Design 設(shè)計(jì)規(guī)范，UI 體驗(yàn)優(yōu)秀，能夠媲美蘋果但又完全不同的設(shè)計(jì)采用移動優(yōu)先的設(shè)計(jì);
• 無論在手機(jī)、平板或 PC 電腦上都有完美的適配;
• 極其豐富詳細(xì)的上手文檔和免費(fèi)的視頻教程，社區(qū)活躍，全職團(tuán)隊(duì)維護(hù)，長期提供支持，每周發(fā)版;
• 支持主題定制，提供無障礙(面向缺陷人群的訪問)支持。支持樹搖優(yōu)化，能大大減少打包體積。

GitHub(star：33.4k)：https://github.com/vuetifyjs/vuetify

6. Vux

VUX 是基于 WeUI 和 Vue(2.x) 開發(fā)的移動端UI組件庫，主要服務(wù)于微信頁面?；趙ebpack + vue-loader + vux可以快速開發(fā)移動端頁面，配合 vux-loader 方便在WeUI的基礎(chǔ)上定制需要的樣式。vux-loader 保證了組件按需使用，因此不用擔(dān)心最終打包了整個vux的組件庫代碼。

VUX并不完全依賴于WeUI，VUX 在 WeUI 的基礎(chǔ)上擴(kuò)展了多個常用組件，但是盡量保持整體UI樣式接近WeUI的設(shè)計(jì)規(guī)范。

不過，官網(wǎng)首頁也列出了這個組件庫的缺點(diǎn)：體驗(yàn)不極致、維護(hù)靠個人，謹(jǐn)慎選擇。

GitHub(star：18k)：https://github.com/airyland/vux

7. View UI

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

View UI 的特性：

• 豐富的組件和功能，滿足絕大部分網(wǎng)站場景;
• 提供開箱即用的 Admin 系統(tǒng) 和 高階組件庫，極大程度節(jié)省開發(fā)成本;
• 提供專業(yè)、優(yōu)質(zhì)的一對一技術(shù)支持;
• 友好的 API ，自由靈活地使用空間;
• 細(xì)致、漂亮的 UI;
• 事無巨細(xì)的文檔;
• 可自定義主題。

GitHub(star：2.5k)：https://github.com/view-design/ViewUI

8. Mint UI

Mint-UI 包含豐富的 CSS 和 JS 組件，能夠滿足日常的移動端開發(fā)需要。通過它，可以快速構(gòu)建出風(fēng)格統(tǒng)一的頁面，提升開發(fā)效率。它可以實(shí)現(xiàn)真正意義上的按需加載組件。可以只加載聲明過的組件及其樣式文件，無需再糾結(jié)文件體積過大。

考慮到移動端的性能門檻，Mint UI 采用 CSS3 處理各種動效，避免瀏覽器進(jìn)行不必要的重繪和重排，從而使用戶獲得流暢順滑的體驗(yàn)。

依托 Vue.js 高效的組件化方案，Mint UI 做到了輕量化。即使全部引入，壓縮后的文件體積也僅有 100kb+。

GitHub(star：16.4k)：https://github.com/ElemeFE/mint-ui

9. Muse-UI

Muse-UI 是一個基于 Vue 2.0 優(yōu)雅的 Material Design UI 開源組件庫，主要用于移動端和一些對瀏覽器兼容性要求不高的桌面端應(yīng)用。

Museui 的特性

• 組件豐富：Muse UI 擁有40多個UI 組件，用于適應(yīng)不同業(yè)務(wù)環(huán)境。
• 可定制：Muse UI 自定義主題方式極為優(yōu)雅，僅需少量代碼即可完成主題樣式替換。
• 基于 Vue 2.0：Muse UI 基于 Vue2.0 開發(fā)，Vue2.0是當(dāng)下最快的前端框架之一，小巧，api友好，可用于開發(fā)的復(fù)雜單頁應(yīng)用

GitHub(star：8.3k)：https://github.com/museui/muse-ui

10. Buefy

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

Buefy 的特性：

• 輕松保留當(dāng)前的布爾瑪主題/變量;
• 支持Material Design圖標(biāo)和FontAwesome;
• 非常輕巧，除了Vue&Bulma之外沒有任何內(nèi)部依賴性;
• 語義代碼輸出;
• 遵循布爾瑪設(shè)計(jì)和一些Material Design UX;
• 專注于可用性和性能，而無需過渡動畫;

GitHub(star：9k)：https://github.com/buefy/buefy

11. Quasar

Quasar 包括用 Vue 構(gòu)建的幾十個 Vue.js 組件組成，為響應(yīng)式 Web 應(yīng)用程序和混合移動應(yīng)用程序提供的豐富功能選項(xiàng)。組件是作為 Web 組件編寫的，所以它們嵌入了 HTML，CSS 和 Javascript 代碼，只需在頁面和布局模板中標(biāo)注一個 HTML 標(biāo)記即可使用。

Quasar 的特性：

• 開箱即用的提供給網(wǎng)站和應(yīng)用程序的最先進(jìn)的UI(遵循《Material指南》);
• 開箱即用的對桌面和移動瀏覽器(包括iOS Safari!)的最佳支持;
• 通過與自己的CLI緊密集成，對每種構(gòu)建模式(SPA、SSR、PWA、移動應(yīng)用程序、桌面應(yīng)用程序和瀏覽器擴(kuò)展)提供了一流的支持，并提供了最佳的開發(fā)人員體驗(yàn);
• 易于自定義(CSS)和可擴(kuò)展(JS);
• 自動tree shaking。

GitHub(star：20.4k)：https://github.com/quasarframework/quasar

12. Vuesax

Vuesax是基于Vue.js的組件框架,從零開始設(shè)計(jì)，可以逐步采用。Vuesax致力于促進(jìn)應(yīng)用程序的開發(fā)，在不刪除必要功能的情況下改進(jìn)其設(shè)計(jì)?！拔覀兿Ｍ薪M件具有獨(dú)立的顏色，形狀和設(shè)計(jì)，以實(shí)現(xiàn)我們前端喜歡的自由設(shè)計(jì)，同時又不損失創(chuàng)作和生產(chǎn)的速度?！?/p>

GitHub(star：5.3k)：https://github.com/lusaxweb/vuesax