盘点12个Vue 3的高颜值UI组件库 _Vue

文章插图

大家好，我是Echa .
今天给大家盘点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。