盤點12個Vue 3的高顏值UI組件庫

作者：Echa攻城獅 2022-12-12 16:35:11

開發(fā) 前端

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

全文大綱

Vuetify 是一個純手工精心打造的 Material 樣式的 Vue UI 組件庫
Vant 3.0 有贊前端團隊開源的移動端組件庫
Element Plus 一套為開發(fā)者、設(shè)計師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 3.0 的桌面端組件庫
Ant-design-vue 是 Ant Design 的 Vue 實現(xiàn)，組件的風(fēng)格與 Ant Design 保持同步
Naive UI 一個 Vue 3 組件庫，比較完整，主題可調(diào)，使用 TypeScript，不算太慢,有點意思
Quasar 構(gòu)建高性能的 VueJS 用戶界面,開箱即用,支持桌面和移動瀏覽器（包括 iOS Safari！）
Arco Design Vue 字節(jié)跳動基于 Arco Design 開源的 Vue UI 組件
Element3 一套Element風(fēng)格，為開發(fā)者、設(shè)計師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 3.0 的桌面端組件
Varlet 基于 Vue3 的 Material design 風(fēng)格移動端組件庫
Vue-devui 基于 DevUI Design 的 Vue3 組件庫，使用 pnpm + vite + vue3 + tsx 技術(shù)搭建
Idux 一個基于 Vue 3.x 和 TypeScript 開發(fā)的開源組件庫
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ū)團隊維護 React 版本和支付寶小程序版本。

特性：

性能極佳，組件平均體積小于 1KB（min+gzip）
70+ 個高質(zhì)量組件，覆蓋移動端主流場景
零外部依賴，不依賴三方 npm 包
使用 TypeScript 編寫，提供完整的類型定義
單元測試覆蓋率超過 90%，提供穩(wěn)定性保障
提供豐富的中英文文檔和組件示例
提供 Sketch 和 Axure 設(shè)計資源
支持 Vue 2、Vue 3 和微信小程序
支持主題定制，內(nèi)置 700+ 個主題變量
支持按需引入和 Tree Shaking
支持無障礙訪問（持續(xù)改進中）
支持深色模式
支持 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 的瀏覽器上運行。如果您確實需要支持舊版本的瀏覽器，請自行添加 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 實現(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)用程序和瀏覽器擴展）提供一流的支持，并提供最佳的開發(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ù)問題，同時它能夠促進設(shè)計部門和研發(fā)部門之間協(xié)作, 成為開發(fā)者之間溝通的語言。
ArcoDesign 主要服務(wù)于字節(jié)跳動旗下中后臺產(chǎn)品的體驗設(shè)計和技術(shù)實現(xiàn)，主要由UED設(shè)計和開發(fā)同學(xué)共同構(gòu)建及維護。

截屏