今天給大家盤(pán)點(diǎn)12個(gè)Vue 3的高顏值UI組件庫(kù)，凡是用過(guò)Vue 框架開(kāi)發(fā)項(xiàng)目的老鐵們最少有用過(guò)其中一種或者二種以上的UI組件庫(kù)，用廣東話(huà)講：個(gè)個(gè)都靚。

全文大綱

1. Vuetify 是一個(gè)純手工精心打造的 Material 樣式的 Vue UI 組件庫(kù)
2. Vant 3.0 有贊前端團(tuán)隊(duì)開(kāi)源的移動(dòng)端組件庫(kù)
3. Element Plus 一套為開(kāi)發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 3.0 的桌面端組件庫(kù)
4. Ant-design-vue 是 Ant Design 的 Vue 實(shí)現(xiàn)，組件的風(fēng)格與 Ant Design 保持同步
5. Naive UI 一個(gè) Vue 3 組件庫(kù)，比較完整，主題可調(diào)，使用 TypeScript，不算太慢,有點(diǎn)意思
6. Quasar 構(gòu)建高性能的 VueJS 用戶(hù)界面,開(kāi)箱即用,支持桌面和移動(dòng)瀏覽器（包括 iOS Safari?。?/li>
7. Arco Design Vue 字節(jié)跳動(dòng)基于 Arco Design 開(kāi)源的 Vue UI 組件
8. Element3 一套Element風(fēng)格，為開(kāi)發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 3.0 的桌面端組件
9. Varlet 基于 Vue3 的 Material design 風(fēng)格移動(dòng)端組件庫(kù)
10. Vue-devui 基于 DevUI Design 的 Vue3 組件庫(kù)，使用 pnpm + vite + vue3 + tsx 技術(shù)搭建
11. Idux 一個(gè)基于 Vue 3.x 和 TypeScript 開(kāi)發(fā)的開(kāi)源組件庫(kù)
12. NutUI 3 京東風(fēng)格的 Vue 移動(dòng)端組件庫(kù)，開(kāi)發(fā)和服務(wù)于移動(dòng)Web界面的企業(yè)級(jí)產(chǎn)品

Vuetify

官網(wǎng)地址：https://vuetifyjs.com/

Github（36k）: https://github.com/vuetifyjs/vuetify

Vuetify 是一個(gè)純手工精心打造的 Material 樣式的 Vue UI 組件庫(kù)。 不需要任何設(shè)計(jì)技能 — 創(chuàng)建嘆為觀止的應(yīng)用程序所需的一切都觸手可及。一套完整的開(kāi)發(fā)對(duì)接文檔，易上手。

截屏：

 Vant 4.0

官網(wǎng)地址：https://vant-ui.github.io/vant/

Github（20.6k）: https://github.com/vant-ui/vant

Vant 是一個(gè)輕量、可靠的移動(dòng)端組件庫(kù)，于 2017 年開(kāi)源。

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社區(qū)團(tuán)隊(duì)維護(hù) React 版本和支付寶小程序版本。

特性：

• 性能極佳，組件平均體積小于 1KB（min+gzip）
• 70+ 個(gè)高質(zhì)量組件，覆蓋移動(dòng)端主流場(chǎng)景
• 零外部依賴(lài)，不依賴(lài)三方 npm 包
• 使用 TypeScript 編寫(xiě)，提供完整的類(lèi)型定義
• 單元測(cè)試覆蓋率超過(guò) 90%，提供穩(wěn)定性保障
• 提供豐富的中英文文檔和組件示例
• 提供 Sketch 和 Axure 設(shè)計(jì)資源
• 支持 Vue 2、Vue 3 和微信小程序
• 支持主題定制，內(nèi)置 700+ 個(gè)主題變量
• 支持按需引入和 Tree Shaking
• 支持無(wú)障礙訪問(wèn)（持續(xù)改進(jìn)中）
• 支持深色模式
• 支持 Nuxt 3
• 支持服務(wù)器端渲染
• 支持國(guó)際化，內(nèi)置 20+ 種語(yǔ)言包

截屏：

 Element Plus

官網(wǎng)地址：https://element-plus.org/zh-CN/

Github（36k）: https://github.com/element-plus/element-plus

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

可以在支持 ES2018 和 ResizeObserver 的瀏覽器上運(yùn)行。 如果您確實(shí)需要支持舊版本的瀏覽器，請(qǐng)自行添加 Babel 和相應(yīng)的 Polyfill 。

截屏：

 Ant-design-vue

官網(wǎng)地址：https://antdv.com/

Github（17.5k）: https://github.com/vueComponent/ant-design-vue

ant-design-vue 是 Ant Design 的 Vue 實(shí)現(xiàn)，組件的風(fēng)格與 Ant Design 保持同步

截屏

 Naive UI

官網(wǎng)地址：https://www.naiveui.com/

Github（11k）:https://github.com/tusen-ai/naive-ui

Quasar 構(gòu)建高性能的 VueJS 用戶(hù)界面,開(kāi)箱即用,支持桌面和移動(dòng)瀏覽器（包括 iOS Safari！）

截屏

Quasar

官網(wǎng)地址：https://quasar.dev/

Github（22.5k）: https://github.com/quasarframework/quasar

Quasar 構(gòu)建高性能的 VueJS 用戶(hù)界面,開(kāi)箱即用,支持桌面和移動(dòng)瀏覽器（包括 iOS Safari?。┎⑶彝ㄟ^(guò)與我們自己的CLI緊密集成，為每種構(gòu)建模式（SPA、SSR、PWA、移動(dòng)應(yīng)用程序、桌面應(yīng)用程序和瀏覽器擴(kuò)展）提供一流的支持，并提供最佳的開(kāi)發(fā)人員體驗(yàn)

截屏

 Arco Design Vue

官網(wǎng)地址：https://arco.design/

Github（3.6k）: https://github.com/arco-design

ArcoDesign 是一套設(shè)計(jì)系統(tǒng)的簡(jiǎn)稱(chēng)。

• ArcoDesign 的目標(biāo), 即通過(guò)通用的設(shè)計(jì)系統(tǒng)去解決產(chǎn)品中的體驗(yàn)問(wèn)題, 并為產(chǎn)品設(shè)計(jì)提供指導(dǎo)原則解決業(yè)務(wù)問(wèn)題，同時(shí)它能夠促進(jìn)設(shè)計(jì)部門(mén)和研發(fā)部門(mén)之間協(xié)作, 成為開(kāi)發(fā)者之間溝通的語(yǔ)言。
• ArcoDesign 主要服務(wù)于字節(jié)跳動(dòng)旗下中后臺(tái)產(chǎn)品的體驗(yàn)設(shè)計(jì)和技術(shù)實(shí)現(xiàn)，主要由UED設(shè)計(jì)和開(kāi)發(fā)同學(xué)共同構(gòu)建及維護(hù)。

截屏

Element3

官網(wǎng)地址：https://e3.shengxinjing.cn/

Github（3.2k）: https://github.com/hug-sun/element3

Element3 一套Element風(fēng)格，為開(kāi)發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 3.0 的桌面端組件

截屏

 Varlet

官網(wǎng)地址：https://varlet.gitee.io/varlet-ui/#/en-US/index

Github（3.6k）: https://github.com/varletjs/varlet

Varlet 是一個(gè)基于 Vue3 開(kāi)發(fā)的 Material 風(fēng)格移動(dòng)端組件庫(kù)，全面擁抱 Vue3 生態(tài)，由社區(qū)建立起來(lái)的組件庫(kù)團(tuán)隊(duì)進(jìn)行維護(hù)。

特性：

• 提供50+個(gè)高質(zhì)量通用組件
• 組件十分輕量
• 由國(guó)人開(kāi)發(fā)，完善的中英文文檔和后勤保障
• ? 支持按需引入
• ? 支持主題定制
• 支持國(guó)際化
• 支持 webstorm，vscode 組件屬性高亮
• 支持 SSR
• 支持 Typescript
• 確保90%以上單元測(cè)試覆蓋率，提供穩(wěn)定性保證
• ? 支持暗黑模式

截屏

 Vue-devui

官網(wǎng)地址：https://vue-devui.github.io/

Github（586）: https://github.com/DevCloudFE/vue-devui

vue-devui 是基于 DevUI Design 的 Vue3 組件庫(kù)，使用 pnpm + vite + vue3 + tsx 技術(shù)搭建，包含55個(gè)簡(jiǎn)潔、易用、靈活的組件，支持按需引入，支持主題定制，并內(nèi)置 追光 / 蜜糖 / 紫羅蘭 等 5 種漂亮的主題

截屏

 Idux

官網(wǎng)地址：https://idux.site/

Github（365）: https://github.com/IDuxFE/idux

@idux 是一套企業(yè)級(jí)中后臺(tái) UI 組件庫(kù), 致力于提供高效愉悅的開(kāi)發(fā)體驗(yàn)。

基于 Vue 3.x + TypeScript 開(kāi)發(fā), 全部代碼開(kāi)源并遵循 MIT 協(xié)議，任何企業(yè)、組織及個(gè)人均可免費(fèi)使用。

特性：

• 全面擁抱 Composition API，從源碼到文檔
• 完全使用 TypeScript 開(kāi)發(fā)，提供完整的類(lèi)型定義
• Monorepo 管理模式：cdk, components, pro
• 開(kāi)箱即用的高質(zhì)量組件
• 靈活的全局配置
• 深入細(xì)節(jié)的主題定制能力
• 國(guó)際化語(yǔ)言支持

截屏

 NutUI 3

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

Github（4.9k）: https://github.com/jdf2e/nutui

NutUI 3 京東風(fēng)格的 Vue 移動(dòng)端組件庫(kù)，開(kāi)發(fā)和服務(wù)于移動(dòng)Web界面的企業(yè)級(jí)產(chǎn)品

特性：

• 70+ 高質(zhì)量組件，覆蓋移動(dòng)端主流場(chǎng)景
• 支持一套代碼同時(shí)開(kāi)發(fā) H5+多端小程序
• 基于京東APP 10.0 視覺(jué)規(guī)范
• 支持按需引用
• 詳盡的文檔和示例
• 支持 TypeScript
• 支持服務(wù)端渲染（測(cè)試階段）
• 支持組件級(jí)別定制主題，內(nèi)置 700+ 個(gè)變量
• 國(guó)際化支持，已支持英文，印尼語(yǔ)和繁體中文
• 單元測(cè)試覆蓋率超過(guò) 80%，保障穩(wěn)定性
• 提供 Sketch 設(shè)計(jì)資源

截屏