vuejs行動端用什麼ui框架

vuejs行動裝置可用的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等。

本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

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

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

1、 iView UI元件庫

iView 是一套基於 Vue.js 的開源 UI 元件庫，主要服務 PC 介面的中後台產品。 iView的元件還是比較齊全的，更新也很快，文件寫得很詳細。有公司團隊維護，比較可靠的Vue UI元件框架

。 iView生態也做得很好，還有開源了一個iView Admin，做後台非常方便。官方網站介紹，iView已應用在TalkingData、阿里巴巴、百度、騰訊、今日頭條、京東、滴滴出行、美團、新浪、聯想等大型公司的產品中。

iView官網：https://www.iviewui.com/.

2、Vux UI元件庫

Vux是基於WeUI和Vue2 .x開發的行動裝置UI元件庫，主要服務於微信頁面。 Vux的定位已經很明確了，一是：Vue行動裝置UI元件庫，二是：WeUI的基礎樣式庫。 Vux的元件涵蓋了所有的WeUI的內容，也擴展了一些常用的元件。例如：Sticky、timeline、v-chart、XCircle。

Vux是個人維護的。但GitHub上star還是很高的，達到13k。在GitHub上看到對issue的關閉還是很迅速的。 Vux文件基本的組件用法和效果都講解到位了。

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

Vux官網：https://vux.li/.

3、Element UI元件庫

Element，一套為開發者、設計師和產品經理準備的基於Vue 2.0 的桌面端元件庫。

Element是餓了麼前端開源維護的Vue UI元件庫，更新頻率還是很高的，基本上一周到半個月都會發布一個新版本。組件齊全，基本上涵蓋後台所需的所有組件，文件講解詳細，例子也很豐富。沒有實際使用過，網路上的Element教學和文章比較多。

Element應該是一個品質比較高的Vue UI元件庫。

Element官網：http://element.eleme.io/#/zh-CN.

#4、Mint UI元件庫

Mint UI基於Vue.js 的行動端元件庫，同樣出自餓了麼前端的專案。 Mint UI是真正意義上的按需載入元件。可以只載入聲明過的元件及其樣式檔。 Mint UI 採用 CSS3 處理各種動效，避免瀏覽器進行不必要的重繪和重排，從而使用戶獲得流暢順暢的體驗。

網路上的影片教學很多都是基於Mint UI來講的，開發行動端web專案還是很方便，文件也很簡介明了。很多頁面Mint UI元件都已經封裝好，基本上可以照著例子寫，簡單的調整一下就可以實現。

不過，在GitHub上看最後一次程式碼提交在2018年1月16日，截止到目前已經過去半年了。不知道是專案比較穩定沒有更新，還是專案有被廢棄的可能。我們會持續關注Mint UI的動態。

Mint UI官網：http://mint-ui.github.io/.

5、Bootstrap-Vue UI元件庫

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

Bootstrap4 放棄了對 IE8 以及 iOS 6 的支持，現在僅支持 IE9 以上 以及 iOS 7 以上版本的瀏覽器。想當初剛流行響應式網站的時候，Bootstrap是世界上最受歡迎的建立行動優先網站的框架，Bootstrap可以說風靡全球。

就算放在現在很多企業網站都是採用Bootstrap做的響應式。 Bootstrap-Vue可以讓你在Vue中也實現Bootstrap的效果。

Bootstrap-Vue官網：https://bootstrap-vue.js.org/
uiv官網：https://uiv.wxsm.space/.

6、Ant Design Vue UI元件庫

Ant Design Vue是 Ant Design 3.X 的 Vue 實現，開發和服務企業級後台產品。在GitHub上可以找到幾個Ant Design的Vue元件。不過相比較而言，Ant Design Vue更勝一籌。

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

Ant Design Vue官網：https://vuecomponent.github.

#7、AT-UI UI元件庫

##AT- UI 是一款基於Vue.js 2.0 的前端UI 元件庫，主要用於快速開發PC 網站中後台產品，支援現代瀏覽器和IE9 及以上。 AT-UI 更精簡，實作了後台常用的元件。

AT_UI官網：https://at-ui.github.io/.

#8、Vant UI元件庫

Vant是輕量、可靠的行動端Vue 元件庫。 Vant是有讚團隊開源的，主要維護也是有讚團隊。 Vant Weapp 是有讚移動端元件庫 Vant 的小程式版本，兩者基於相同的視覺規範，提供一致的 API 接口，助力開發者快速搭建小程式應用程式。截止到目前，Vant已經開源了50 個經過有讚線上業務檢驗的元件。

例如：、AddressEdit 地址編輯、AddressList 地址清單、Area 省市區選擇、Card 卡、Contact 聯絡人、Coupon 優惠券、GoodsAction 商品頁行動點、SubmitBar 提交訂單列、Sku 商品規格彈層。如果做商城的，不太在意介面，實現業務邏輯的話，用Vant元件庫開發還是很快的。

Vant官網：https://youzan.github.io/.

#9、cube-ui UI元件庫

cube-ui 是基於Vue.js 實現的精緻行動端元件庫。由滴滴內部組件庫精簡提煉而來，經歷了業務一年多的考驗，並且每個組件都有充分單元測試，為後續集成提供保障。在互動體驗方面追求極致。遵循統一的設計互動標準，高度還原設計效果；介面標準化，統一規範使用方式，開發更簡單有效率。支援按需引入和後編譯，輕量靈活；擴展性強，可以方便地基於現有組件實現二次開發。

cube-ui官網：https://didi.github.io/.

#10、Muse-UI UI元件庫

Muse- UI基於Vue 2.0 優雅的Material Design UI 元件庫。 Muse UI 擁有40多個UI 元件，用於適應不同業務環境。 Muse UI 僅需少量程式碼即可完成主題樣式替換。 Muse UI 可用於開發的複雜單頁應用程式

Muse-UI官網：https://muse-ui.org/#/zh-CN.

##11、N3- components UI元件庫

N3元件庫是基於Vue.js建構的，讓前端工程師和全端工程師能快速建立頁面和應用。 N3-components超過60個元件 元件清單、自訂樣式、支援多種模化範式（UMD）、使用ES6進行開發。

N3官網：https://n3-components.github.

12、Mand Mobile

Mand Mobile是面向金融場景的Vue移動端UI元件庫，豐富、靈活、實用，快速建置優質的金融產品，讓複雜的金融場景變得簡單。 Mand Mobile含有豐富的組件30 的基礎組件，涵蓋金融場景，極高的易用性組件均有詳細說明文檔、案例演示，汲取最前沿技術，組件化輕量化實現，兼顧穩定和品質，努力實現金融場景的全覆蓋。

Mand Mobile官網：https://didi.github.io/.

13、we-vue UI元件庫

we-vue是一套基於Vue.js 的行動關元件庫，結合weui.css 樣式庫，封裝了一系列元件，非常適合微信公眾號等行動端開發。 we-vue 包含35 個元件，單元測試覆蓋率超 98%，支援 babel-plugin-import，完善的線上文檔，詳細的線上範例。

we-vue官網：https://wevue.org/.

#14、veui UI元件庫

veui是一個由百度EFE team開發的Vue企業級UI元件庫。目前文檔還沒有，只有demo。 GitHub上說是正在進行的一項工作。那我們就耐心等待吧。

veui官網：https://ecomfe.github.io/.

15、Semantic-UI-Vue UI元件庫

Semantic- UI-Vue是基於Vue.js對Semantic-UI 框架的實作。 Semantic作為一個開發框架，幫助開發者使用對人類友善的HTML語言建立優雅的響應式佈局。 Semantic-UI-Vue提供了一個類似 Semantic-UI 的 API 以及一組可自訂的主題。

Semantic-UI-Vue官網：https://semantic-ui-vue.github.

16、vue-beauty

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

vue-beauty官網： https://fe-driver.github.io/.

17、NutUI元件庫

NutUI是一套京東風格的行動端Vue元件庫，開發及服務於行動Web介面的企業級前中後台產品。 NutUI組件庫支援跨平台，自動轉微信小程式元件（稍後上線，敬請期待），30 京東行動端專案正在使用，基於京東APP 7.0 視覺規範，支援按需加載，詳盡的文件和範例，支援客製化主題，支援多語言（國際化），支援TypeScript，支援服務端渲染（Vue SSR），單元測試加持，配套有基於Webpack的建置工具，可快速建立已內建本元件庫的Vue工程。

NutUI官網： https://nutui.jd.com/#/index.

在選擇框架的時候一定要根據實際Web開發情況和團隊的熟悉程度來選擇。一個好的UI元件庫對一個Web專案來說太重要了。好的UI元件庫可以起到事半功倍的效果。

相關推薦：《vue.js教學》

以上是vuejs行動端用什麼ui框架的詳細內容。更多資訊請關注PHP中文網其他相關文章！