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 元件，還有大量封裝好的外掛程式/指令/常用工具庫供呼叫
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 社群開源了，推薦給各位喜歡免費開源的伙伴們。
特點：
5. arco.design
位元組跳動企業級產品設計系統，支援React和Vue雙版本
官方網址：https://arco.design/
ArcoDesign 基於字節跳動公司內部的Byte Design 升級而來，在打磨了近3 年之後，透過字節內部大量業務沉澱和驗證，在由掘金舉辦的《稀土開發者大會2021》上開源了，這不只是一款UI 元件庫，而是一個能力全面的企業級產品設計系統。
###ArcoDesign 主要解決在打造中後台應用時，讓產品設計和開發無縫連接，提高品質和效率。目前 ArcoDesign 主要服務於位元組跳動旗下中後台產品的體驗設計和技術實現，主要由 UED 設計和開發同學共同建構及維護。 ###
亮點：
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 瀏覽器
#完全無樣式、完全可存取的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/
-
特性
-
##單元測試覆蓋率超過90%，提供穩定性保障
-
提供豐富的中英文文件與元件範例
-
提供Sketch和Axure 設計資源
-
支援Vue 2、Vue 3 和微信小程式
-
支援主題定制，內建700 個主題變數
-
支援按需引入和Tree Shaking
-
支援無障礙存取（持續改進）
支持深色模式（從Vant 4 開始支援）
支援伺服器端渲染
支援國際化，內建20 種語言包
15. NutUI
#支援服務端渲染（對SEO需求友善）
支援自訂主題
單元測試覆蓋
16. Varlet
支援SSR 伺服器端渲染
#支援Typescript
#抽獎元件技術特性
-
共包含12 種抽獎組件
-
#UI 設計基於京東APP 10.0 視覺規範
-
官網提供詳盡的文件和充足的程式碼範例
-
基於Vue 3.0，也支援TypeScript，支援按需引入
##便捷靈活的自訂設置
-
涵蓋12種常見的抽獎元件
-
############# ###Marquee 跑馬燈抽獎 ############SquareNine 九宮格抽獎############ScratchCard 刮刮卡抽獎##############ScratchCard 刮刮卡抽獎##################################################################################################################### #GiftBox 神秘禮盒############LottoRoll 搖獎機############Hiteggs 砸金蛋############GiftRain紅包雨############LuckShake 搖一搖############DollMachine 娃娃機###
ShakeDice 搖骰子
GuessGift 你藏我猜
（學習影片分享：web前端開發、程式入門）
以上是17個Vue3實用UI元件庫（Web+行動）分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
