vuejs行動(dòng)裝置可用的ui框架：1、iView；2、Vux；3、Element；4、Mint UI；5、Bootstrap-VUE；6、Ant Design Vue；7、AT-UI；8 、Vant；9、cube-ui；10、Muse-UI等。

本教學(xué)操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

Vue 是一個(gè)輕巧、高效能、可元件化的MVVM函式庫(kù)，API簡(jiǎn)潔明了，上手快。自Vue推出以來，已獲得許多Web開發(fā)者的認(rèn)可。在該公司的Web前端專案開發(fā)中，多個(gè)專案採(cǎi)用基於Vue的UI元件框架開發(fā)，並投入正式使用。開發(fā)團(tuán)隊(duì)在使用Vue.js框架和UI元件庫(kù)以後，開發(fā)效率大大提高，自己寫的程式碼也少了，很多介面效果元件已經(jīng)封裝好了。

在選擇Vue UI元件庫(kù)的過程中，透過GitHub上根據(jù)star數(shù)量、文件豐富程度、更新的頻率以及維護(hù)等因素，也收集整理了一些優(yōu)秀的Vue UI元件庫(kù)。

1、 iView UI元件庫(kù)

iView 是一套基於 Vue.js 的開源 UI 元件庫(kù)，主要服務(wù) PC 介面的中後臺(tái)產(chǎn)品。 iView的元件還是比較齊全的，更新也很快，文件寫得很詳細(xì)。有公司團(tuán)隊(duì)維護(hù)，比較可靠的Vue UI元件框架

。 iView生態(tài)也做得很好，還有開源了一個(gè)iView Admin，做後臺(tái)非常方便。官方網(wǎng)站介紹，iView已應(yīng)用在TalkingData、阿里巴巴、百度、騰訊、今日頭條、京東、滴滴出行、美團(tuán)、新浪、聯(lián)想等大型公司的產(chǎn)品中。

iView官網(wǎng)：https://www.iviewui.com/.

2、Vux UI元件庫(kù)

Vux是基於WeUI和Vue2 .x開發(fā)的行動(dòng)裝置UI元件庫(kù)，主要服務(wù)於微信頁(yè)面。 Vux的定位已經(jīng)很明確了，一是：Vue行動(dòng)裝置UI元件庫(kù)，二是：WeUI的基礎(chǔ)樣式庫(kù)。 Vux的元件涵蓋了所有的WeUI的內(nèi)容，也擴(kuò)展了一些常用的元件。例如：Sticky、timeline、v-chart、XCircle。

Vux是個(gè)人維護(hù)的。但GitHub上star還是很高的，達(dá)到13k。在GitHub上看到對(duì)issue的關(guān)閉還是很迅速的。 Vux文件基本的組件用法和效果都講解到位了。

在vux官網(wǎng)上也展示了許多Vux的使用案例。在微信頁(yè)面開發(fā)中，基本上沒有太多的bug，開發(fā)還是比較順手的。

Vux官網(wǎng)：https://vux.li/.

3、Element UI元件庫(kù)

Element，一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基於Vue 2.0 的桌面端元件庫(kù)。

Element是餓了麼前端開源維護(hù)的Vue UI元件庫(kù)，更新頻率還是很高的，基本上一周到半個(gè)月都會(huì)發(fā)布一個(gè)新版本。組件齊全，基本上涵蓋後臺(tái)所需的所有組件，文件講解詳細(xì)，例子也很豐富。沒有實(shí)際使用過，網(wǎng)路上的Element教學(xué)和文章比較多。

Element應(yīng)該是一個(gè)品質(zhì)比較高的Vue UI元件庫(kù)。

Element官網(wǎng)：http://element.eleme.io/#/zh-CN.

#4、Mint UI元件庫(kù)

Mint UI基於Vue.js 的行動(dòng)端元件庫(kù)，同樣出自餓了麼前端的專案。 Mint UI是真正意義上的按需載入元件?？梢灾惠d入聲明過的元件及其樣式檔。 Mint UI 採(cǎi)用 CSS3 處理各種動(dòng)效，避免瀏覽器進(jìn)行不必要的重繪和重排，從而使用戶獲得流暢順暢的體驗(yàn)。

網(wǎng)路上的影片教學(xué)很多都是基於Mint UI來講的，開發(fā)行動(dòng)端web專案還是很方便，文件也很簡(jiǎn)介明了。很多頁(yè)面Mint UI元件都已經(jīng)封裝好，基本上可以照著例子寫，簡(jiǎn)單的調(diào)整一下就可以實(shí)現(xiàn)。

不過，在GitHub上看最後一次程式碼提交在2018年1月16日，截止到目前已經(jīng)過去半年了。不知道是專案比較穩(wěn)定沒有更新，還是專案有被廢棄的可能。我們會(huì)持續(xù)關(guān)注Mint UI的動(dòng)態(tài)。

Mint UI官網(wǎng)：http://mint-ui.github.io/.

5、Bootstrap-Vue UI元件庫(kù)

Bootstrap -VUE提供了基於vue2的Bootstrap V4組件和網(wǎng)格系統(tǒng)的實(shí)現(xiàn)，完成了廣泛和自動(dòng)化的WAI ARA可訪問性標(biāo)記。 uiv是基於Vue2的Bootstrap 3實(shí)作。 Bootstrap 4是最新發(fā)布的版本，與 Bootstrap3 相比擁有了更多的具體的類別以及把一些有關(guān)的部分變成了相關(guān)的組件。同時(shí) Bootstrap.min.css 的體積減少了40%以上。

Bootstrap4 放棄了對(duì) IE8 以及 iOS 6 的支持，現(xiàn)在僅支持 IE9 以上 以及 iOS 7 以上版本的瀏覽器。想當(dāng)初剛流行響應(yīng)式網(wǎng)站的時(shí)候，Bootstrap是世界上最受歡迎的建立行動(dòng)優(yōu)先網(wǎng)站的框架，Bootstrap可以說風(fēng)靡全球。

就算放在現(xiàn)在很多企業(yè)網(wǎng)站都是採(cǎi)用Bootstrap做的響應(yīng)式。 Bootstrap-Vue可以讓你在Vue中也實(shí)現(xiàn)Bootstrap的效果。

Bootstrap-Vue官網(wǎng)：https://bootstrap-vue.js.org/
uiv官網(wǎng)：https://uiv.wxsm.space/.

6、Ant Design Vue UI元件庫(kù)

Ant Design Vue是 Ant Design 3.X 的 Vue 實(shí)現(xiàn)，開發(fā)和服務(wù)企業(yè)級(jí)後臺(tái)產(chǎn)品。在GitHub上可以找到幾個(gè)Ant Design的Vue元件。不過相比較而言，Ant Design Vue更勝一籌。

Ant Design Vue共享Ant Design of React設(shè)計(jì)工具體系，實(shí)作了所有Ant Design of React的元件，支援現(xiàn)代瀏覽器和 IE9 及以上（需要 polyfills）。可以讓熟悉Ant Design的在使用Vue時(shí)，很容易的上手。

Ant Design Vue官網(wǎng)：https://vuecomponent.github.

#7、AT-UI UI元件庫(kù)

##AT- UI 是一款基於Vue.js 2.0 的前端UI 元件庫(kù)，主要用於快速開發(fā)PC 網(wǎng)站中後臺(tái)產(chǎn)品，支援現(xiàn)代瀏覽器和IE9 及以上。 AT-UI 更精簡(jiǎn)，實(shí)作了後臺(tái)常用的元件。

AT_UI官網(wǎng)：https://at-ui.github.io/.

#8、Vant UI元件庫(kù)

Vant是輕量、可靠的行動(dòng)端Vue 元件庫(kù)。 Vant是有讚團(tuán)隊(duì)開源的，主要維護(hù)也是有讚團(tuán)隊(duì)。 Vant Weapp 是有讚移動(dòng)端元件庫(kù) Vant 的小程式版本，兩者基於相同的視覺規(guī)範(fàn)，提供一致的 API 接口，助力開發(fā)者快速搭建小程式應(yīng)用程式。截止到目前，Vant已經(jīng)開源了50 個(gè)經(jīng)過有讚線上業(yè)務(wù)檢驗(yàn)的元件。

例如：、AddressEdit 地址編輯、AddressList 地址清單、Area 省市區(qū)選擇、Card 卡、Contact 聯(lián)絡(luò)人、Coupon 優(yōu)惠券、GoodsAction 商品頁(yè)行動(dòng)點(diǎn)、SubmitBar 提交訂單列、Sku 商品規(guī)格彈層。如果做商城的，不太在意介面，實(shí)現(xiàn)業(yè)務(wù)邏輯的話，用Vant元件庫(kù)開發(fā)還是很快的。

Vant官網(wǎng)：https://youzan.github.io/.

#9、cube-ui UI元件庫(kù)

cube-ui 是基於Vue.js 實(shí)現(xiàn)的精緻行動(dòng)端元件庫(kù)。由滴滴內(nèi)部組件庫(kù)精簡(jiǎn)提煉而來，經(jīng)歷了業(yè)務(wù)一年多的考驗(yàn)，並且每個(gè)組件都有充分單元測(cè)試，為後續(xù)集成提供保障。在互動(dòng)體驗(yàn)方面追求極致。遵循統(tǒng)一的設(shè)計(jì)互動(dòng)標(biāo)準(zhǔn)，高度還原設(shè)計(jì)效果；介面標(biāo)準(zhǔn)化，統(tǒng)一規(guī)範(fàn)使用方式，開發(fā)更簡(jiǎn)單有效率。支援按需引入和後編譯，輕量靈活；擴(kuò)展性強(qiáng)，可以方便地基於現(xiàn)有組件實(shí)現(xiàn)二次開發(fā)。

cube-ui官網(wǎng)：https://didi.github.io/.

#10、Muse-UI UI元件庫(kù)

Muse- UI基於Vue 2.0 優(yōu)雅的Material Design UI 元件庫(kù)。 Muse UI 擁有40多個(gè)UI 元件，用於適應(yīng)不同業(yè)務(wù)環(huán)境。 Muse UI 僅需少量程式碼即可完成主題樣式替換。 Muse UI 可用於開發(fā)的複雜單頁(yè)應(yīng)用程式

Muse-UI官網(wǎng)：https://muse-ui.org/#/zh-CN.

##11、N3- components UI元件庫(kù)

N3元件庫(kù)是基於Vue.js建構(gòu)的，讓前端工程師和全端工程師能快速建立頁(yè)面和應(yīng)用。 N3-components超過60個(gè)元件 元件清單、自訂樣式、支援多種?；?fàn)式（UMD）、使用ES6進(jìn)行開發(fā)。

N3官網(wǎng)：https://n3-components.github.

12、Mand Mobile

Mand Mobile是面向金融場(chǎng)景的Vue移動(dòng)端UI元件庫(kù)，豐富、靈活、實(shí)用，快速建置優(yōu)質(zhì)的金融產(chǎn)品，讓複雜的金融場(chǎng)景變得簡(jiǎn)單。 Mand Mobile含有豐富的組件30 的基礎(chǔ)組件，涵蓋金融場(chǎng)景，極高的易用性組件均有詳細(xì)說明文檔、案例演示，汲取最前沿技術(shù)，組件化輕量化實(shí)現(xiàn)，兼顧穩(wěn)定和品質(zhì)，努力實(shí)現(xiàn)金融場(chǎng)景的全覆蓋。

Mand Mobile官網(wǎng)：https://didi.github.io/.

13、we-vue UI元件庫(kù)

we-vue是一套基於Vue.js 的行動(dòng)關(guān)元件庫(kù)，結(jié)合weui.css 樣式庫(kù)，封裝了一系列元件，非常適合微信公眾號(hào)等行動(dòng)端開發(fā)。 we-vue 包含35 個(gè)元件，單元測(cè)試覆蓋率超 98%，支援 babel-plugin-import，完善的線上文檔，詳細(xì)的線上範(fàn)例。

we-vue官網(wǎng)：https://wevue.org/.

#14、veui UI元件庫(kù)

veui是一個(gè)由百度EFE team開發(fā)的Vue企業(yè)級(jí)UI元件庫(kù)。目前文檔還沒有，只有demo。 GitHub上說是正在進(jìn)行的一項(xiàng)工作。那我們就耐心等待吧。

veui官網(wǎng)：https://ecomfe.github.io/.

15、Semantic-UI-Vue UI元件庫(kù)

Semantic- UI-Vue是基於Vue.js對(duì)Semantic-UI 框架的實(shí)作。 Semantic作為一個(gè)開發(fā)框架，幫助開發(fā)者使用對(duì)人類友善的HTML語(yǔ)言建立優(yōu)雅的響應(yīng)式佈局。 Semantic-UI-Vue提供了一個(gè)類似 Semantic-UI 的 API 以及一組可自訂的主題。

Semantic-UI-Vue官網(wǎng)：https://semantic-ui-vue.github.

16、vue-beauty

vue- beauty是一套基於vue.js 和ant-design樣式的PC端UI 元件庫(kù)，旨在幫助開發(fā)者提升產(chǎn)品體驗(yàn)和開發(fā)效率、降低維護(hù)成本。 vue-beauty包含豐富的元件，涵蓋常用場(chǎng)景，基於vue元件化開發(fā)，資料驅(qū)動(dòng)視圖，封裝複雜性，提供簡(jiǎn)單友善的api，基於ant design樣式最佳化。

vue-beauty官網(wǎng)： https://fe-driver.github.io/.

17、NutUI元件庫(kù)

NutUI是一套京東風(fēng)格的行動(dòng)端Vue元件庫(kù)，開發(fā)及服務(wù)於行動(dòng)Web介面的企業(yè)級(jí)前中後臺(tái)產(chǎn)品。 NutUI組件庫(kù)支援跨平臺(tái)，自動(dòng)轉(zhuǎn)微信小程式元件（稍後上線，敬請(qǐng)期待），30 京東行動(dòng)端專案正在使用，基於京東APP 7.0 視覺規(guī)範(fàn)，支援按需加載，詳盡的文件和範(fàn)例，支援客製化主題，支援多語(yǔ)言（國(guó)際化），支援TypeScript，支援服務(wù)端渲染（Vue SSR），單元測(cè)試加持，配套有基於Webpack的建置工具，可快速建立已內(nèi)建本元件庫(kù)的Vue工程。

NutUI官網(wǎng)： https://nutui.jd.com/#/index.

在選擇框架的時(shí)候一定要根據(jù)實(shí)際Web開發(fā)情況和團(tuán)隊(duì)的熟悉程度來選擇。一個(gè)好的UI元件庫(kù)對(duì)一個(gè)Web專案來說太重要了。好的UI元件庫(kù)可以起到事半功倍的效果。

相關(guān)推薦：《vue.js教學(xué)》

以上是vuejs行動(dòng)端用什麼ui框架的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！