首页 >web前端 >Vue.js >17个Vue3实用UI组件库（Web+移动）分享

17个Vue3实用UI组件库（Web+移动）分享

青灯夜游原创: 2022-10-19 11:09:3411571浏览

Vue3 正式发布已经快2年了，今年2月也正式变成 Vue 项目的默认版本，各大组件库、框架都对 Vue 3 做了支持和优化，下面本篇文章就给大家整理分享17个Vue3实用UI组件库，包含Web UI库和移动UI库，希望对大家有所帮助！

一、Web UI库

1. ElementUI Plus

一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库。（学习视频分享：vuejs教程）

官方地址：https://element-plus.org/zh-CN/

2. Ant Design of Vue

Ant Design 的 Vue 实现，开发和服务于企业级后台产品

官方地址：https://www.antdv.com/docs/vue/introduce-cn

Ant Design Vue 是一个非常成熟的框架，使用 Ant Design Vue 创建用户界面非常简单，这些组件可以适应各种图标样式、字体和黑色主题。Ant Design Vue 不断改进其60多个组件，基本覆盖项目大部份需求，而且使它们变得更好，更易于访问。

Vue3 上的 Ant Design 包更小，感觉更轻，并且支持 SSR（还包括组合API），Ant Design 拥有成熟的复杂组件，如数据表、统计框、pop确认、模态和弹出窗口。

3. BalmUI

基于谷歌的 Material Design，附带 Vue 插件和指令，以及从简单到复杂的高度可定制组件

官方地址：https://next-material.balmjs.com/

BalmUI 是一款由 Balm.js （一款类似 Vue CLI 的前端工作流工具）团队打造前端 UI 组件库，基于最新的 Vue 3 构建，开箱即用，定制化强，设计风格完全遵循谷歌的 Material Design 设计规范，是一款交互体验非常优秀的 UI 组件库。

特色：

提炼自企业级中后台产品的交互效果和视觉风格，美观大方，细节体验极佳
开箱即用。不仅是一款高质量的 Vue 组件，还有大量封装好的插件/指令/常用工具库供调用
内置图标库。集成最新的 Material Icons 图标库
所有组件和插件均高可定制化，并且可被独立使用

4. Naive UI

图森Vue3的组件库，基于 Vue 3.0/TypeScript 的免费开源前端 UI 组件库，文档完整，非大厂 KPI 项目！

官方地址：https://www.naiveui.com/zh-CN/os-theme

Naive UI 是一款基于当前比较新的 Vue 3.0/TypeScript 技栈开发的前端 UI 组件库，作者来自图森未来公司，一开始内部维护并使用两年，如今在 Github 社区开源了，推荐给各位喜欢免费开源的伙伴们。

特点：

组件丰富完整，超过70个常用业务组件，支持按需引入
官方提供主题编辑器，不用繁琐的 less、sass、css 变量，也不用 webpack 的 loaders，使用的是由 TypeScript 构建的先进的类型安全主题系统
运行快小巧轻量，专门针对样式优化，所有组件都可以 treeshaking [1]，不需要导入任何 CSS 就能让组件正常工作

5. arco.design

字节跳动企业级产品设计系统，支持React和Vue双版本

官方地址：https://arco.design/

ArcoDesign 基于字节跳动公司内部的 Byte Design 升级而来，在打磨了近 3 年之后，通过字节内部大量业务沉淀和验证，在由掘金举办的《稀土开发者大会2021》上开源了，这不仅仅是一款 UI 组件库，而是一个能力全面的企业级产品设计系统。

ArcoDesign 主要解决在打造中后台应用时，让产品设计和开发无缝连接，提高质量和效率。目前 ArcoDesign 主要服务于字节跳动旗下中后台产品的体验设计和技术实现，主要由 UED 设计和开发同学共同构建及维护。

亮点：

提供系统且全面的设计规范和资源，覆盖产品设计、UI 设计以及后期开发
React 和 Vue 同步支持。同时提供了 React 和 Vue 两套 UI 组件库。Vue 组件库基于 Vue 3.0 开发
支持一键开启暗黑模式，无缝切换
提供了最佳实践 Arco Pro，整理了常见的页面场景，帮助用户快速初始化项目和使用页面模板，从 0 到 1 搭建中后台应用

6. Quasar

轻松构建高性能和高质量的Vue.js 3用户界面，好用，但没有中文文档

官方地址：https://quasar.dev/

Quasar 是一个完整的、以性能为中心的框架，可帮助构建 Vue 用户界面（SPA、PWA、SSR、移动和桌面），除了 Vue、Node 和 Webpack，Quasar 还包含 Cordova、Capacitor 和 Electron，它们可以帮助构建桌面和移动体验，而无需单独学习。

7. iDUX

Vue3.x 的 UI 组件库，完全使用 TypeScript 开发

官方地址：https://idux.site/

8. TDesign

腾讯业务团队在服务业务过程中沉淀的一套企业级设计体系

官方地址：https://tdesign.tencent.com/

开发文档：https://tdesign.tencent.com/vue-next/overview

9. PrimeVue

易于使用、多功能、高性能的 Vue UI 组件库

官方地址：https://www.primefaces.org/primevue/

基于 Vue 3 的免费开源、定制性强的前端 UI 组件库，来自国外的一个优秀的前端 UI 组件库，很有特色，值得研究学习和上手使用。

PrimeVue 是一套非常优秀的 Vue UI 组件库，支持 Vue 3 的 web UI 组件库，组件丰富，定制性很强，官网文档清晰，代码例子充足，而且中文化也做得很不错，是一款可用性很强的 Vue 组件库。

10. DevUI

华为基于 Vue3 和 DevUI 设计的 UI 组件

官方地址：https://vue-devui.github.io/

11. vuestic-ui

Vue 3 的免费和开源 UI 库 ,UI非常好看，并且有可用后台管理界面。

官方地址：https://vuestic.dev/

Vuestic UI 是一套由 Epicmax 团队开发的一套基于 Vue.js 的 web 开发组件库，最近更新发布了 Vue3 版本，希望用 Vue .js 的专业知识以最佳方式构建一个可用性强且全面的开源工具。Vuestic UI 在发布后不久，便成为使用 Vue 构建的最受欢迎的组件库之一。