大家好，我是 CUGGZ,。

Vue 3.0 已經(jīng)發(fā)布兩年多的時間,，今年 2 月 Vue 3.0 也正式成為新的默認版本。今天就來分享 7 個適用于 Vue 3 的高顏值 UI 組件庫,！

Element Plus

Element Plus 是一套由餓了么開源出品的為開發(fā)者、設計師和產(chǎn)品經(jīng)理準備的基于 Vue 3.0 的組件庫,。Element Plus 使用 TypeScript + Composition API 進行了重構,，提供完整的類型定義文件，使用 Vue 3.0 Composition API 降低耦合,、簡化邏輯，使用 Lerna 維護和管理項目,，完善了 52 種國際化語言支持,，支持了黑暗模式。

由于 Vue 3 不再支持 IE11,，Element Plus 也不再支持 IE 瀏覽器,，其環(huán)境支持情況如下：

• Github：https://github.com/element-plus/element-plus
• 官方文檔：https:///zh-CN/

Ant Design Vue

Ant Design of Vue 是 Ant Design 的 Vue 實現(xiàn)，開發(fā)和服務于企業(yè)級后臺產(chǎn)品,。其具有以下特性：

• 提煉自企業(yè)級中后臺產(chǎn)品的交互語言和視覺風格,。
• 開箱即用的高質量 Vue 組件。
• 共享 Ant Design of React 設計工具體系,。

Ant Design Vue 支持服務端渲染,，支持在 Electron 中使用，其環(huán)境支持情況如下：

• Github：https://github.com/vueComponent/ant-design-vue
• 官方文檔：https:///components/overview

Naive UI

Naive UI 是一款由圖森未來開源,，基于 Vue 3.0/TypeScript 技棧開發(fā)的 UI 組件庫,。其具有以下特點：

• 組件豐富完整，超過70個常用業(yè)務組件，支持按需引入,；
• 官方提供主題編輯器,，不用繁瑣的 less、sass,、css 變量,，也不用 webpack 的 loaders，使用的是由 TypeScript 構建的先進的類型安全主題系統(tǒng),；
• 運行快小巧輕量,，專門針對樣式優(yōu)化，所有組件都可以 treeshaking,，不需要導入任何 CSS 就能讓組件正常工作,。

• Github：https://github.com/tusen-ai/naive-ui
• 官方文檔：https://www./

VARLET

Varlet 是一個基于 Vue3 開發(fā)的 Material 風格移動端組件庫，全面擁抱 Vue3 生態(tài),，由社區(qū)團隊維護,。其支持 Typescript、按需引入,、暗黑模式,、主題定制、國際化,，并提供 VS Code 插件保障良好的開發(fā)體驗,。

• Github：https://github.com/varletjs/varlet
• 官方文檔：https://varlet./varlet-ui/#/zh-CN/index

NutUI

NutUI 是一套由京東出品的移動端 Vue2、Vue3 組件庫,，支持一套代碼生成 H5 和小程序,。其具有以下特點：

• 70+ 高質量組件，覆蓋移動端主流場景
• 支持按需引用
• 支持 TypeScript
• 支持服務端渲染
• 支持組件級別定制主題,，內置 700+ 個變量
• 國際化支持,，已支持英文，印尼語和繁體中文
• 單元測試覆蓋率超過 80%,，保障穩(wěn)定性
• 提供 Sketch 設計資源

• Github：https://github.com/jdf2e/nutui
• 官方文檔：https://nutui.jd.com/#/

Vant

Vant 是一套由有贊出品的輕量,、可靠的移動端組件庫。目前 Vant 官方提供了 Vue 2 版本,、Vue 3 版本和微信小程序版本,。其具有以下特點：

• 性能極佳,，組件平均體積小于 1KB（min+gzip）
• 70+ 個高質量組件,，覆蓋移動端主流場景
• 零外部依賴，不依賴三方 npm 包
• 使用 TypeScript 編寫,，提供完整的類型定義
• 單元測試覆蓋率超過 90%,，提供穩(wěn)定性保障
• 提供 Sketch 和 Axure 設計資源
• 支持主題定制，內置 700+ 個主題變量
• 支持按需引入和 Tree Shaking
• 支持深色模式
• 支持 Nuxt 3
• 支持服務器端渲染
• 支持國際化,，內置 20+ 種語言包

• Github：https://github.com/youzan/vant
• 官方文檔：https://vant-ui./vant/

Arco Design

Arco Design 是一套由字節(jié)跳動出品的基于 Arco Design 的 Vue UI 組件庫,。提供了 60 多個開箱即用的高質量組件, 可以覆蓋絕大部分業(yè)務場景,。

Github：https://github.com/arco-design/arco-design-vue