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

全文大綱

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

Vuetify

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

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

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

截屏：

 Vant 4.0

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

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

Vant 是一個輕量、可靠的移動端組件庫，于 2017 年開源。

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

特性：

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

截屏：

 Element Plus

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

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

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

可以在支持 ES2018 和 ResizeObserver 的瀏覽器上運(yùn)行。 如果您確實(shí)需要支持舊版本的瀏覽器，請自行添加 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 用戶界面,開箱即用,支持桌面和移動瀏覽器（包括 iOS Safari?。?/p>

截屏

Quasar

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

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

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

截屏

 Arco Design Vue

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

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

ArcoDesign 是一套設(shè)計系統(tǒng)的簡稱。

• ArcoDesign 的目標(biāo), 即通過通用的設(shè)計系統(tǒng)去解決產(chǎn)品中的體驗問題, 并為產(chǎn)品設(shè)計提供指導(dǎo)原則解決業(yè)務(wù)問題，同時它能夠促進(jìn)設(shè)計部門和研發(fā)部門之間協(xié)作, 成為開發(fā)者之間溝通的語言。
• ArcoDesign 主要服務(wù)于字節(jié)跳動旗下中后臺產(chǎn)品的體驗設(shè)計和技術(shù)實(shí)現(xiàn)，主要由UED設(shè)計和開發(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)格，為開發(fā)者、設(shè)計師和產(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 是一個基于 Vue3 開發(fā)的 Material 風(fēng)格移動端組件庫，全面擁抱 Vue3 生態(tài)，由社區(qū)建立起來的組件庫團(tuán)隊進(jìn)行維護(hù)。

特性：

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

截屏

 Vue-devui

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

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

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

截屏

 Idux

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

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

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

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

特性：

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

截屏

 NutUI 3

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

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

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

特性：

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

截屏

本文標(biāo)題：盤點(diǎn)12個Vue 3的高顏值UI組件庫
URL地址：http://uogjgqi.cn/article/dhppcge.html