5 款適合國內使用的 Vue 行動裝置 UI 元件庫

這篇文章跟大家分享5 款適合國內使用的 Vue 行動裝置 UI 元件庫，希望對大家有幫助！

在Vue 3 正式版發佈一段時間後，各大元件庫、框架紛紛對Vue 3 做了支援與最佳化，特別是Vue 行動端元件庫，有了跨越式的升級。幾家頭部大廠也全面擁抱 Vue 3 ，陸續發布了支援 Vue 3 的行動裝置 UI 元件庫，非常值得安麗一波。 （學習影片分享：vuejs教學）

本文篩選了國內常用的Vue 行動裝置UI 元件庫，選出了5 款來自國內網路一線大廠或商業化較好的企業/ 個人長期維護的免費行動端UI 庫分享給大家。

• Vant 3 - 有讚移動UI 元件庫，支援Vue 3 微信小程序，支付寶小程式
• Cube UI - 滴滴出行行動端UI 庫，品質可靠，標準規範，擴展性強
• VUX - 行動端UI 元件庫，針對微信強勢優化
• NUTUI 3.0 - 京東行動端UI 庫，面向電商業務場景，支援Vue3
• Vuetify 3 - 老牌Vue UI ，基於Google的Material Design 樣式開發，支援Vue3

1、Vant 3 - 有讚移動UI 元件庫，支援Vue 3 微信小程序，支付寶小程序

#Github：https://github.com/youzan/vant

首先推薦有讚團隊開源的Vant 3 行動裝置UI 元件庫，不僅已全面支援Vue 3 而且還支援微信小程式和支付寶小程式。可以說行動端 UI 元件庫王者。 Vant 對內承載了有讚所有核心業務，對外服務十多萬開發者，是業界主流的行動端元件庫之一。

Vant 3 的效能極佳，組件平均尺寸小於 1KB （min gzip），內建 65 個高品質元件，涵蓋了主流使用情境中的多數需求。有 700 個主題變量，引入了 Tree-Shaking 可按需引入元件，減少打包體積。

2、Cube UI - 滴滴出行行動裝置UI 函式庫，品質可靠，標準規範，擴充性強

Github：https://github.com/didi/cube-ui

#滴滴團隊開源的Cube UI 行動裝置Vue UI 元件庫，輕巧趁手。

Cube UI 品質可靠，由滴滴內部元件庫精簡提煉而來，經歷了業務一年多的考驗，並且每個元件都有充分單元測試，為後續整合提供保障。體驗極致，以快速回應、動畫流暢、接近原生為目標，在互動體驗方面追求極致。

Cube UI標準規範，遵循統一的設計互動標準，高度還原設計效果；介面標準化，統一規範使用方式，開發更加簡單有效率。擴展性強，支援按需引入和後編譯，輕量靈活；擴展性強，可以方便地基於現有組件實現二次開發。

3、VUX - 行動裝置UI 元件庫，針對微信強勢最佳化

## Github：https://github.com/airyland/vux

VUX 是一款低調的行動裝置Vue UI 元件庫，純靠作者個人興趣支持，已經維護了5、6年了。主要服務於行動端，對微信友善支援。支援 vux-loader 保證了元件按需使用，不用擔心打包體積過大。 VUX 並非完全依賴 

WeUI (微信的設計 UI 函式庫)，VUX 在 WeUI 的基礎上擴展了多個常用元件，但是盡量保持整體UI樣式接近 WeUI 的設計規格。

4、NutUI 3.0 - 京東行動端UI 庫，面向電商業務場景

Github：https://github.com/jdf2e/nutui

NutUI 3.0 是京東發布的Vue 3 行動裝置UI 元件庫。對行動端友好，特別針對行動端電商業務場景最佳化測試。 70 高品質 UI 元件，基於京東 APP 10.0 對視覺規範開發，支援按需引用，支援 TypeScript，支援主題自訂。可以使用 Vue 語言來編寫在 H5、小程式平台上的應用，幫助我們提升開發效率，並改善開發體驗。

5、Vuetify 3 - 老牌 Vue UI ，基於Google的 Material Design 樣式開發##

Github：https://github.com/vuetifyjs/vuetify

Vuetify 老牌Vue UI 元件庫，它提供了豐富的常用組件（有超過100 個組件），適用於多數場景下的使用情況。 Vuetify 是基於Google的 Material Design 樣式開發，無需寫一行 CSS 就能產生相當整潔清爽的介面功能。 Vuetify 支援 PC 端和行動端，對行動端有特別棒的最佳化，響應式，配置簡單，有響應式網路系統，支援事件處理，支援多種瀏覽器，甚至連 IE 11 也支援。 Vuetify 已經發布支援 Vue 3 的版本，如果正在考慮未來的遷移問題，可放心使用。

擴充功能：Vue UI 元件庫與卡拉雲

#本文介紹了5 款Vue 行動裝置UI 元件庫，雖然這些元件庫可以避免我們重複造輪子，但即便如此，前端調試有時也非常令人抓狂。如果不想處理前端問題，推薦使用卡拉雲，卡拉雲內建各類組件，無需懂任何前端，只需拖曳即可快速生成。

這是一個用卡拉雲搭建的資料庫 CURD 後台管理系統，只需拖曳元件，即可在10分鐘內完成建置。

看更多模版：https://kalacloud.com/templates/

#原文網址：https://kalacloud.com/blog/best -vue-mobile-ui-component-libraries/

（學習影片分享：web前端開發、程式設計入門）

以上是5 款適合國內使用的 Vue 行動裝置 UI 元件庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！