17款優(yōu)秀的Vue UI組件庫推薦

?

Vue 是一個輕巧、高性能、可組件化的MVVM庫，API簡潔明了，上手快。從Vue推出以來，得到眾多Web開發(fā)者的認(rèn)可。
在公司的Web前端項(xiàng)目開發(fā)中，多個項(xiàng)目采用基于Vue的UI組件框架開發(fā)，并投入正式使用。
開發(fā)團(tuán)隊在使用Vue.js框架和UI組件庫以后，開發(fā)效率大大提高，自己寫的代碼也少了，很多界面效果組件已經(jīng)封裝好了。
在選擇Vue UI組件庫的過程中，通過GitHub上根據(jù)star數(shù)量、文檔豐富程度、更新的頻率以及維護(hù)等因素，也收集整理了一些優(yōu)秀的Vue UI組件庫。

?

PS：國內(nèi)的UI組件大部分都只有一部分的，常用的頭部導(dǎo)航，底部導(dǎo)航，listview，grid表格很多都是沒有的。后面才發(fā)現(xiàn)，基于Vue的Quasar Framework 介紹 這個框架UI組件很全面，準(zhǔn)備下次使用這個框架了。

?

基于Vue的Quasar Framework 中文網(wǎng)
http://www.quasarchs.com/

quasarframework/quasar: Quasar Framework
https://github.com/quasarframework/quasar

Quasar（發(fā)音為/kwe?.zɑ?/)是MIT許可的開源框架（基于Vue），可幫助Web開發(fā)人員創(chuàng)建：

• 響應(yīng)式網(wǎng)站
• PWA（Progressive Web App）
• 通過Apache Cordova構(gòu)建移動APP（Android，iOS，…）
• 多平臺桌面應(yīng)用程序（使用Electron）

?

Quasar允許開發(fā)人員編寫一次代碼，然后使用相同的代碼庫同時部署為網(wǎng)站、PWA、Mobile App和Electron App。使用最先進(jìn)的CLI設(shè)計應(yīng)用程序，并提供精心編寫，速度非常快的Quasar Web組件。當(dāng)使用Quasar時，你不需要像Hammerjs，Momentjs或Bootstrap這樣的額外重型庫。它擁有這些功能，而且體積很小！

?

==============

1、 iView UI組件庫

iView (現(xiàn)以改名：View UI. View-design)?是一套基于 Vue.js 的開源 UI 組件庫，主要服務(wù)于 PC 界面的中后臺產(chǎn)品。iView的組件還是比較齊全的，更新也很快，文檔寫得很詳細(xì)。有公司團(tuán)隊維護(hù)，比較可靠的Vue UI組件框架。iView生態(tài)也做得很好，還有開源了一個iView Admin，做后臺非常方便。官網(wǎng)上介紹，iView已經(jīng)應(yīng)用在TalkingData、阿里巴巴、百度、騰訊、今日頭條、京東、滴滴出行、美團(tuán)、新浪、聯(lián)想等大型公司的產(chǎn)品中。
iView官網(wǎng)：https://www.iviewui.com/

?

2、Vux UI組件庫

Vux是基于WeUI和Vue2.x開發(fā)的移動端UI組件庫，主要服務(wù)于微信頁面。Vux的定位已經(jīng)很明確了，一是：Vue移動端UI組件庫，二是：WeUI的基礎(chǔ)樣式庫。Vux的組件涵蓋了所有的WeUI的內(nèi)容，還擴(kuò)展了一些常用的組件。比如：Sticky、timeline、v-chart、XCircle。Vux是個人維護(hù)的。但是GitHub上star還是很高的，達(dá)到13k。在GitHub上看到對issue的關(guān)閉還是很迅速的。Vux文檔基本的組件用法和效果都講解到位了。在vux官網(wǎng)上也展示了很多Vux的使用案例。在微信頁面開發(fā)中，基本沒有太多的bug，開發(fā)還是比較順手的。
Vux官網(wǎng)：https://vux.li/

3、Element UI組件庫

Element，一套為開發(fā)者、設(shè)計師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的桌面端組件庫。Element是餓了么前端開源維護(hù)的Vue UI組件庫，更新頻率還是很高的，基本一周到半個月都會發(fā)布一個新版本。組件齊全，基本涵蓋后臺所需的所有組件，文檔講解詳細(xì)，例子也很豐富。沒有實(shí)際使用過，網(wǎng)上的Element教程和文章比較多。Element應(yīng)該是一個質(zhì)量比較高的Vue UI組件庫。
Element官網(wǎng)：http://element.eleme.io/#/zh-CN

4、Mint UI組件庫

Mint UI基于 Vue.js 的移動端組件庫，同樣出自餓了么前端的項(xiàng)目。Mint UI是真正意義上的按需加載組件。可以只加載聲明過的組件及其樣式文件。Mint UI 采用 CSS3 處理各種動效，避免瀏覽器進(jìn)行不必要的重繪和重排，從而使用戶獲得流暢順滑的體驗(yàn)。網(wǎng)上的視頻教程很多都是基于Mint UI來講的，開發(fā)移動端web項(xiàng)目還是很方便，文檔也很簡介明了。很多頁面Mint UI組件都已經(jīng)封裝好，基本可以照著例子寫，簡單的調(diào)整一下就可以實(shí)現(xiàn)。不過，在GitHub上看最后一次代碼提交在2018年1月16日。不知道是項(xiàng)目比較穩(wěn)定沒有更新，還是項(xiàng)目有被廢棄的可能。
Mint UI官網(wǎng)：http://mint-ui.github.io/#!/zh-cn

5、Bootstrap-Vue UI組件庫

Bootstrap-VUE提供了基于vue2的Bootstrap V4組件和網(wǎng)格系統(tǒng)的實(shí)現(xiàn)，完成了廣泛和自動化的WAI ARA可訪問性標(biāo)記。Bootstrap 4是最新發(fā)布的版本，與 Bootstrap3 相比擁有了更多的具體的類以及把一些有關(guān)的部分變成了相關(guān)的組件。同時 Bootstrap.min.css 的體積減少了40%以上。Bootstrap4 放棄了對 IE8 以及 iOS 6 的支持，現(xiàn)在僅僅支持 IE9 以上 以及 iOS 7 以上版本的瀏覽器。想當(dāng)初剛流行響應(yīng)式網(wǎng)站的時候，Bootstrap是世界上最受歡迎的建立移動優(yōu)先網(wǎng)站的框架，Bootstrap可以說風(fēng)靡全球。就算放在現(xiàn)在很多企業(yè)網(wǎng)站都是采用Bootstrap做的響應(yīng)式。Bootstrap-Vue可以讓你在Vue中也實(shí)現(xiàn)Bootstrap的效果。
Bootstrap-Vue官網(wǎng)：https://bootstrap-vue.js.org/

6、Ant Design Vue UI組件庫

Ant Design Vue是 Ant Design 3.X 的 Vue 實(shí)現(xiàn)，開發(fā)和服務(wù)于企業(yè)級后臺產(chǎn)品。在GitHub上可以找到幾個Ant Design的Vue組件。不過相比較而言，Ant Design Vue更勝一籌。Ant Design Vue共享Ant Design of React設(shè)計工具體系，實(shí)現(xiàn)了所有Ant Design of React的組件，支持現(xiàn)代瀏覽器和 IE9 及以上（需要 polyfills）。可以讓熟悉Ant Design的在使用Vue時，很容易的上手。
Ant Design Vue官網(wǎng)：https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/

7、AT-UI UI組件庫

AT-UI 是一款基于 Vue.js 2.0 的前端 UI 組件庫，主要用于快速開發(fā) PC 網(wǎng)站中后臺產(chǎn)品，支持現(xiàn)代瀏覽器和 IE9 及以上。AT-UI 更加精簡，實(shí)現(xiàn)了后臺常用的組件。
AT_UI官網(wǎng)：https://at-ui.github.io/at-ui/#/zh

8、Vant UI組件庫

Vant是一個輕量、可靠的移動端 Vue 組件庫。Vant是有贊團(tuán)隊開源的，主要維護(hù)也是有贊團(tuán)隊。Vant Weapp 是有贊移動端組件庫 Vant 的小程序版本，兩者基于相同的視覺規(guī)范，提供一致的 API 接口，助力開發(fā)者快速搭建小程序應(yīng)用。截止到目前，Vant已經(jīng)開源了50+ 個經(jīng)過有贊線上業(yè)務(wù)檢驗(yàn)的組件。比如：、AddressEdit 地址編輯、AddressList 地址列表、Area 省市區(qū)選擇、Card 卡片、Contact 聯(lián)系人、Coupon 優(yōu)惠券、GoodsAction 商品頁行動點(diǎn)、SubmitBar 提交訂單欄、Sku 商品規(guī)格彈層。如果做商城的，不太在意界面，實(shí)現(xiàn)業(yè)務(wù)邏輯的話，用Vant組件庫開發(fā)還是很快的。
Vant官網(wǎng)：https://youzan.github.io/vant/#/zh-CN/intro

9、cube-ui UI組件庫

cube-ui 是基于 Vue.js 實(shí)現(xiàn)的精致移動端組件庫。由滴滴內(nèi)部組件庫精簡提煉而來，經(jīng)歷了業(yè)務(wù)一年多的考驗(yàn)，并且每個組件都有充分單元測試，為后續(xù)集成提供保障。在交互體驗(yàn)方面追求極致。遵循統(tǒng)一的設(shè)計交互標(biāo)準(zhǔn)，高度還原設(shè)計效果；接口標(biāo)準(zhǔn)化，統(tǒng)一規(guī)范使用方式，開發(fā)更加簡單高效。支持按需引入和后編譯，輕量靈活；擴(kuò)展性強(qiáng)，可以方便地基于現(xiàn)有組件實(shí)現(xiàn)二次開發(fā)。
cube-ui官網(wǎng)：https://didi.github.io/cube-ui/#/zh-CN

10、Muse-UI UI組件庫

Muse-UI基于 Vue 2.0 優(yōu)雅的 Material Design UI 組件庫。Muse UI 擁有40多個UI 組件，用于適應(yīng)不同業(yè)務(wù)環(huán)境。Muse UI 僅需少量代碼即可完成主題樣式替換。Muse UI 可用于開發(fā)的復(fù)雜單頁應(yīng)用
Muse-UI官網(wǎng)：https://muse-ui.org/#/zh-CN

11、N3-components UI組件庫

N3組件庫是基于Vue.js構(gòu)建的，讓前端工程師和全棧工程師能快速構(gòu)建頁面和應(yīng)用。N3-components超過60個組件 組件列表、自定義樣式、支持多種模化范式（UMD）、使用ES6進(jìn)行開發(fā)。
N3官網(wǎng)：https://n3-components.github.io/N3-components/component.html

12、Mand Mobile

Mand Mobile是面向金融場景的Vue移動端UI組件庫，豐富、靈活、實(shí)用，快速搭建優(yōu)質(zhì)的金融類產(chǎn)品，讓復(fù)雜的金融場景變簡單。Mand Mobile含有豐富的組件30+的基礎(chǔ)組件，覆蓋金融場景，極高的易用性組件均有詳細(xì)說明文檔、案例演示，汲取最前沿技術(shù)，組件化輕量化實(shí)現(xiàn)，兼顧穩(wěn)定和品質(zhì)，努力實(shí)現(xiàn)金融場景的全覆蓋。
Mand Mobile官網(wǎng)：https://didi.github.io/mand-mobile/#/zh-CN/home

下面是1.x的文檔和演示地址：（文檔地址已經(jīng)遷移了）

https://mand-mobile.github.io/1x-doc/
https://mand-mobile.github.io/2x-doc/

之前的地址打不開了

?

13、we-vue UI組件庫

we-vue 是一套基于 Vue.js 的移動關(guān)組件庫，結(jié)合 weui.css 樣式庫，封裝了一系列組件，非常適于微信公眾號等移動端開發(fā)。we-vue 包含35+ 個組件，單元測試覆蓋率超 98%，支持 babel-plugin-import，完善的在線文檔，詳細(xì)的在線示例。
we-vue官網(wǎng)：https://wevue.org/

14、veui UI組件庫

veui是一個由百度EFE team開發(fā)的Vue企業(yè)級UI組件庫。目前文檔還沒有，只有demo。
GitHub上說是正在進(jìn)行的一項(xiàng)工作。那我們就耐心等待吧。
veui官網(wǎng)：https://ecomfe.github.io/veui/components/#/

15、Semantic-UI-Vue UI組件庫

Semantic-UI-Vue是基于 Vue.js對Semantic-UI 框架的實(shí)現(xiàn)。
Semantic作為一款開發(fā)框架，幫助開發(fā)者使用對人類友好的HTML語言構(gòu)建優(yōu)雅的響應(yīng)式布局。Semantic-UI-Vue提供了一個類似于 Semantic-UI 的 API 以及一組可定制的主題。
Semantic-UI-Vue官網(wǎng)：https://semantic-ui-vue.github.io/#/
在選擇框架的時候一定要根據(jù)實(shí)際Web開發(fā)情況和團(tuán)隊的熟悉程度來選擇。一個好的UI組件庫對一個Web項(xiàng)目來說很重要

?

16.Vue.js Material Component Framework — Vuetify.js

https://vuetifyjs.com/zh-Hans

Vuetify完全根據(jù)Material Design規(guī)范開發(fā)。每個組件都是手工制作的，為您的下一個偉大的應(yīng)用程序帶來最好的UI工具。開發(fā)并沒有停留在Google規(guī)范中的核心組件上。通過社區(qū)成員和贊助商的支持，更多的組件將被設(shè)計并提供給大家享受。

這個主要是國外比較流行的vue ui組件，各種功能都有，有中文翻譯的，但有些還是英文的，翻譯得不是很好

PS：國內(nèi)的UI組件大部分都只有一部分的，常用的頭部導(dǎo)航，底部導(dǎo)航，listview，grid表格很多都是沒有的。

?

17. 國內(nèi)京東的輕量級移動端

文檔參見：NutUI?http://nutui.jd.com/#/index

總結(jié)

以上是生活随笔為你收集整理的17款优秀的Vue UI组件库汇总的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。