盤點12個Vue 3的高顏值UI組件庫
今天給大家盤點12個Vue 3的高顏值UI組件庫，凡是用過Vue 框架開發項目的老鐵們最少有用過其中一種或者二種以上的UI組件庫，用廣東話講：個個都靚。
全文大綱
- Vuetify 是一個純手工精心打造的 Material 樣式的 Vue UI 組件庫
- Vant 3.0 有贊前端團隊開源的移動端組件庫
- Element Plus 一套為開發者、設計師和產品經理準備的基于 Vue 3.0 的桌面端組件庫
- Ant-design-vue 是 Ant Design 的 Vue 實現，組件的風格與 Ant Design 保持同步
- Naive UI 一個 Vue 3 組件庫，比較完整，主題可調，使用 TypeScript，不算太慢,有點意思
- Quasar 構建高性能的 VueJS 用戶界面,開箱即用,支持桌面和移動瀏覽器（包括 iOS Safari！）
- Arco Design Vue 字節跳動基于 Arco Design 開源的 Vue UI 組件
- Element3 一套Element風格，為開發者、設計師和產品經理準備的基于 Vue 3.0 的桌面端組件
- Varlet 基于 Vue3 的 Material design 風格移動端組件庫
- Vue-devui 基于 DevUI Design 的 Vue3 組件庫，使用 pnpm + vite + vue3 + tsx 技術搭建
- Idux 一個基于 Vue 3.x 和 TypeScript 開發的開源組件庫
- NutUI 3 京東風格的 Vue 移動端組件庫，開發和服務于移動Web界面的企業級產品
Vuetify
官網地址：https://vuetifyjs.com/
Github（36k）: https://github.com/vuetifyjs/vuetify
Vuetify 是一個純手工精心打造的 Material 樣式的 Vue UI 組件庫。 不需要任何設計技能 — 創建嘆為觀止的應用程序所需的一切都觸手可及。一套完整的開發對接文檔，易上手。
截屏：
Vant 4.0
官網地址：https://vant-ui.github.io/vant/
Github（20.6k）: https://github.com/vant-ui/vant
Vant 是一個輕量、可靠的移動端組件庫，于 2017 年開源。
目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社區團隊維護 React 版本和支付寶小程序版本。
特性：
- 性能極佳，組件平均體積小于 1KB（min+gzip）
- 70+ 個高質量組件，覆蓋移動端主流場景
- 零外部依賴，不依賴三方 npm 包
- 使用 TypeScript 編寫，提供完整的類型定義
- 單元測試覆蓋率超過 90%，提供穩定性保障
- 提供豐富的中英文文檔和組件示例
- 提供 Sketch 和 Axure 設計資源
- 支持 Vue 2、Vue 3 和微信小程序
- 支持主題定制，內置 700+ 個主題變量
- 支持按需引入和 Tree Shaking
- 支持無障礙訪問（持續改進中）
- 支持深色模式
- 支持 Nuxt 3
- 支持服務器端渲染
- 支持國際化，內置 20+ 種語言包
截屏：
Element Plus
官網地址：https://element-plus.org/zh-CN/
Github（36k）: https://github.com/element-plus/element-plus
Element-plus 一套為開發者、設計師和產品經理準備的基于 Vue 3.0 的桌面端組件庫。
可以在支持 ES2018 和 ResizeObserver 的瀏覽器上運行。 如果您確實需要支持舊版本的瀏覽器，請自行添加 Babel 和相應的 Polyfill 。
截屏：
Ant-design-vue
官網地址：https://antdv.com/
Github（17.5k）: https://github.com/vueComponent/ant-design-vue
ant-design-vue 是 Ant Design 的 Vue 實現，組件的風格與 Ant Design 保持同步
截屏
Naive UI
官網地址：https://www.naiveui.com/
Github（11k）:https://github.com/tusen-ai/naive-ui
Quasar 構建高性能的 VueJS 用戶界面,開箱即用,支持桌面和移動瀏覽器（包括 iOS Safari！）
截屏
Quasar
官網地址：https://quasar.dev/
Github（22.5k）: https://github.com/quasarframework/quasar
Quasar 構建高性能的 VueJS 用戶界面,開箱即用,支持桌面和移動瀏覽器（包括 iOS Safari！）并且通過與我們自己的CLI緊密集成，為每種構建模式（SPA、SSR、PWA、移動應用程序、桌面應用程序和瀏覽器擴展）提供一流的支持，并提供最佳的開發人員體驗
截屏
Arco Design Vue
官網地址：https://arco.design/
Github（3.6k）: https://github.com/arco-design
ArcoDesign 是一套設計系統的簡稱。
- ArcoDesign 的目標, 即通過通用的設計系統去解決產品中的體驗問題, 并為產品設計提供指導原則解決業務問題，同時它能夠促進設計部門和研發部門之間協作, 成為開發者之間溝通的語言。
- ArcoDesign 主要服務于字節跳動旗下中后臺產品的體驗設計和技術實現，主要由UED設計和開發同學共同構建及維護。
截屏
Element3
官網地址：https://e3.shengxinjing.cn/
Github（3.2k）: https://github.com/hug-sun/element3
Element3 一套Element風格，為開發者、設計師和產品經理準備的基于 Vue 3.0 的桌面端組件
截屏
Varlet
官網地址：https://varlet.gitee.io/varlet-ui/#/en-US/index
Github（3.6k）: https://github.com/varletjs/varlet
Varlet 是一個基于 Vue3 開發的 Material 風格移動端組件庫，全面擁抱 Vue3 生態，由社區建立起來的組件庫團隊進行維護。
特性：
- 提供50+個高質量通用組件
- 組件十分輕量
- 由國人開發，完善的中英文文檔和后勤保障
- ? 支持按需引入
- ? 支持主題定制
- 支持國際化
- 支持 webstorm，vscode 組件屬性高亮
- 支持 SSR
- 支持 Typescript
- 確保90%以上單元測試覆蓋率，提供穩定性保證
- ? 支持暗黑模式
截屏
Vue-devui
官網地址：https://vue-devui.github.io/
Github（586）: https://github.com/DevCloudFE/vue-devui
vue-devui 是基于 DevUI Design 的 Vue3 組件庫，使用 pnpm + vite + vue3 + tsx 技術搭建，包含55個簡潔、易用、靈活的組件，支持按需引入，支持主題定制，并內置 追光 / 蜜糖 / 紫羅蘭 等 5 種漂亮的主題
截屏
Idux
官網地址：https://idux.site/
Github（365）: https://github.com/IDuxFE/idux
@idux 是一套企業級中后臺 UI 組件庫, 致力于提供高效愉悅的開發體驗。
基于 Vue 3.x + TypeScript 開發, 全部代碼開源并遵循 MIT 協議，任何企業、組織及個人均可免費使用。
特性：
- 全面擁抱 Composition API，從源碼到文檔
- 完全使用 TypeScript 開發，提供完整的類型定義
- Monorepo 管理模式：cdk, components, pro
- 開箱即用的高質量組件
- 靈活的全局配置
- 深入細節的主題定制能力
- 國際化語言支持
截屏
NutUI 3
官網地址：https://nutui.jd.com/#/
Github（4.9k）: https://github.com/jdf2e/nutui
NutUI 3 京東風格的 Vue 移動端組件庫，開發和服務于移動Web界面的企業級產品
特性：
- 70+ 高質量組件，覆蓋移動端主流場景
- 支持一套代碼同時開發 H5+多端小程序
- 基于京東APP 10.0 視覺規范
- 支持按需引用
- 詳盡的文檔和示例
- 支持 TypeScript
- 支持服務端渲染（測試階段）
- 支持組件級別定制主題，內置 700+ 個變量
- 國際化支持，已支持英文，印尼語和繁體中文
- 單元測試覆蓋率超過 80%，保障穩定性
- 提供 Sketch 設計資源
截屏
