17個Vue3實用UI元件庫（Web+行動）分享

Vue3 正式發布已經快2年了，今年2月也正式變成Vue 專案的預設版本，各大元件庫、框架都對Vue 3 做了支援和優化，以下這篇文章就給大家整理分享17個Vue3實用UI元件庫，包含Web UI庫和行動UI庫，希望對大家有幫助！

一、Web UI庫

1.   ElementUI Plus

一套為開發者、設計師和產品經理準備的基於Vue 3.0 的桌面端元件庫。 （學習影片分享：vuejs教學）

官方網址：https://element-plus.org/zh-CN/

#2.    Ant Design of Vue

Ant Design 的Vue 實現，開發和服務企業級後台產品

官方地址：https ://www.antdv.com/docs/vue/introduce-cn

Ant Design Vue 是一個非常成熟的框架，使用Ant Design Vue 建立使用者介面非常簡單，這些元件可以適應各種圖示樣式、字體和黑色主題。 Ant Design Vue 不斷改進其60多個元件，基本上涵蓋專案大部需求，而且使它們變得更好，更易於存取。

Vue3 上的Ant Design 套件更小，感覺更輕，並且支援SSR（還包括組合API），Ant Design 擁有成熟的複雜元件，如資料表、統計框、pop確認、模態和彈出視窗。 3.    BalmUI

基於Google的Material Design，附帶Vue 外掛程式和指令，以及從簡單到複雜的高度可自訂元件

官方網址：https://next-material.balmjs.com/

BalmUI 是一款由Balm.js （一款類似Vue CLI 的前端工作流程工具）團隊打造前端UI 元件庫，基於最新的 Vue 3 構建，開箱即用，客製化強，設計風格完全遵循Google的 Material Design 設計規範，是一款互動體驗非常優秀的UI 元件庫。

特色：

提煉自企業級中後台產品的互動效果和視覺風格，美觀大方，細節體驗極佳
開箱即用。不僅是一款高品質的 Vue 元件，還有大量封裝好的外掛程式/指令/常用工具庫供呼叫
內建圖示庫。整合最新的Material Icons 圖示庫
所有元件和外掛程式均高可自訂化，並且可獨立使用

4.    Naive UI

圖森Vue3的元件庫，基於Vue 3.0/TypeScript 的免費開源前端UI 元件庫，文件完整，非大廠KPI 專案！

官方地址：https://www.naiveui.com/zh-CN/os-theme

#Naive UI 是基於目前比較新的Vue 3.0/TypeScript 技棧開發的前端UI 元件庫，作者來自圖森未來公司，一開始內部維護並使用兩年，如今在Github 社群開源了，推薦給各位喜歡免費開源的伙伴們。

特點：
元件豐富完整，超過70個常用業務元件，支援按需引入
官方提供主題編輯器，不用繁瑣的less、sass、css 變量，也不用webpack 的loaders，使用的是由TypeScript 構建的先進的類型安全主題系統
運行快小巧輕量，專門針對樣式最佳化，所有元件都可以treeshaking [1]，不需要匯入任何CSS 就能讓元件正常運作

5.    arco.design

位元組跳動企業級產品設計系統，支援React和Vue雙版本

官方網址：https://arco.design/

ArcoDesign 基於字節跳動公司內部的Byte Design 升級而來，在打磨了近3 年之後，透過字節內部大量業務沉澱和驗證，在由掘金舉辦的《稀土開發者大會2021》上開源了，這不只是一款UI 元件庫，而是一個能力全面的企業級產品設計系統。

###ArcoDesign 主要解決在打造中後台應用時，讓產品設計和開發無縫連接，提高品質和效率。目前 ArcoDesign 主要服務於位元組跳動旗下中後台產品的體驗設計和技術實現，主要由 UED 設計和開發同學共同建構及維護。 ###

亮點：

• 提供系統且全面的設計規格和資源，涵蓋產品設計、UI 設計以及後期開發

• React 和Vue 同步支援。同時提供了 React 和 Vue 兩套 UI 元件庫。 Vue 元件庫基於Vue 3.0 開發

• ##支援一鍵開啟暗黑模式，無縫切換

##提供了最佳實踐Arco Pro，整理了常見的頁面場景，幫助使用者快速初始化項目和使用頁面模板，從0 到1 搭建中後台應用

6.    Quasar輕鬆建立高效能和高品質的Vue.js 3使用者介面，好用，但沒有中文文件

官方地址：https://quasar.dev/

#Quasar 是一個完整的、以效能為中心的框架，可協助建立Vue 使用者介面（SPA、PWA、SSR、行動和桌面），除了Vue、Node 和Webpack，Quasar還包含Cordova、Capacitor 和Electron，它們可以幫助建立桌面和行動體驗，而無需單獨學習。

7.    iDUX#Vue3.x 的UI 元件庫，完全使用TypeScript 開發

#官方地址：https: //idux.site/

8.    TDesign##騰訊業務團隊服務業務過程中沉澱的一套企業級設計體系

官方地址：https://tdesign.tencent.com/

開發文件：https://tdesign.tencent.com/vue -next/overview

9.      PrimeVue

使用、多功能、高效能的Vue UI 元件庫

官方網址：https://www.primefaces.org/primevue/

基於Vue 3 的免費開源、客製化性強的前端UI 元件庫，來自國外的一個優秀的前端UI 元件庫，很有特色，值得研究學習和上手使用。

PrimeVue 是一套非常優秀的Vue UI 元件庫，支援Vue 3 的web UI 元件庫，元件豐富，客製化性很強，官網文件清晰，程式碼範例充足，而且中文化也做得很好，是一款可用性很強的Vue 元件庫。

10.    DevUI

#華為基於Vue3 和DevUI 設計的UI 元件

官方網址：https://vue -devui.github.io/

11.     vuestic-ui

Vue 3 的免費和開源UI 庫,UI非常好看，並且有可用後台管理介面。

官方地址：https://vuestic.dev/

Vuestic UI 是一套由 Epicmax 團隊開發的一套基於 Vue.js 的web 開發元件庫，最近更新發布了 Vue3版本，希望用Vue .js 的專業知識以最佳方式建構一個可用性強且全面的開源工具。 Vuestic UI 在發布後不久，便成為使用 Vue 建立的最受歡迎的元件庫之一。

Vuestic UI 的團隊 Epicmax 是全球排名前15位的Vue.js 開發團隊，響應式的設計使這些元件不僅能用在 web PC 專案上，而且幾乎適用於任何螢幕大小的解析度。 鍵盤可用性是 Vuestic 的特色功能，在整個框架中提供無縫鍵盤操作支援。

技術特性：

相容Vue3，內建52 個漂亮的響應式元件，功能豐富

• 支援鍵盤導航，體驗流暢，這在流行的元件庫中不多見

• #支援透過設定檔和CSS 變數全域設定元件

• 內建2 套顏色主題方案

• 支援樹搖優化，減少打包體積

• ##支援i18n 國際化

• 相容於非IE 瀏覽器

12.     Headless UI

#完全無樣式、完全可存取的UI 元件，旨在與Tailwind CSS 完美整合。 官方網址：https://headlessui.com/

#

13.      View UI Plus

#基於Vue.js 3 的企業級UI 元件庫和前端解決方案

官方地址： https://www.iviewui.com/

View UI Plus 是View Design 設計系統中基於Vue.js 3 的一套UI 元件庫，主要用於企業級中後台系統。

二、行動UI函式庫

#14.       Vant

• ## Vant 是一個輕量、可靠的行動端元件庫，於2017 年開源。
• 官方地址：https://vant-contrib.gitee.io/vant/#/zh-CN/

• 特性
效能極佳，元件平均體積小於1KB（min gzip）
70 個高品質元件，覆蓋行動端主流場景
零外部依賴，不依賴三方npm 套件
#使用TypeScript 編寫，提供完整的型別定義

• ##單元測試覆蓋率超過90%，提供穩定性保障

• 提供豐富的中英文文件與元件範例

• 提供Sketch和Axure 設計資源

• 支援Vue 2、Vue 3 和微信小程式

• 支援主題定制，內建700 個主題變數

• 支援按需引入和Tree Shaking

• 支援無障礙存取（持續改進）

支持深色模式（從Vant 4 開始支援）

支援伺服器端渲染

支援國際化，內建20 種語言包

15.      NutUI

• NutUI 是京東樣式風格的Vue 行動裝置元件庫，開發並服務於行動Web 介面的企業級產品。

官方網址：https://nutui.jd.com/#/

• #NutUI 3.0 新版功能

• 70 高品質組件（比舊版多了20 ）

• 基於京東APP 9.0 視覺規範（舊版基於京東APP 7.0）

• 同樣支援按需引用

• 更詳盡的文件和範例

• #支援TypeScript

#支援服務端渲染（對SEO需求友善）

支援自訂主題

單元測試覆蓋

16.     Varlet

• #Material 風格行動裝置元件庫，文件非常齊全。被尤雨溪推薦了，值得關注。

官方網址：https://varlet.gitee.io/varlet-ui/#/zh-CN/home

• Varlet 技術特性：

• 提供50個高品質、輕量的通用元件

• 由國人開發，並且提供完善的中/英文檔

• 支援按需引入和主題定制，支援暗黑模式

• 支援國際化

• 支援webstorm，vscode 編輯器的元件屬性高亮

支援SSR 伺服器端渲染

#支援Typescript

• ##確保90% 以上單元測試覆蓋率

#17.     nutui-bingo
#由京東NutUI 前端團隊出品的一款基於 NutUI   Vue 3 的抽獎組件庫，用於快速開發行銷活動和小遊戲場景的抽獎玩法。

• 官方網址：https://nutui.jd.com/bingo/#/

#抽獎元件技術特性

• 共包含12 種抽獎組件

• #UI 設計基於京東APP 10.0 視覺規範

• 官網提供詳盡的文件和充足的程式碼範例

• 基於Vue 3.0，也支援TypeScript，支援按需引入

• ##便捷靈活的自訂設置

• 涵蓋12種常見的抽獎元件
TurnTable  大轉盤抽獎

• ############# ###Marquee  跑馬燈抽獎 ############SquareNine  九宮格抽獎############ScratchCard  刮刮卡抽獎##############ScratchCard  刮刮卡抽獎##################################################################################################################### #GiftBox  神秘禮盒############LottoRoll  搖獎機############Hiteggs  砸金蛋############GiftRain紅包雨############LuckShake  搖一搖############DollMachine  娃娃機###

• ShakeDice  搖骰子

• GuessGift  你藏我猜

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

以上是17個Vue3實用UI元件庫（Web+行動）分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！