基于vue的ui框架（2023值得推荐的高颜值Vue3.0 Web PC端UI框架，赶紧收藏学习！）

Hello                 ，我是前端胡说 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 ，本期给大家带来2023值得推荐的Vue3.0 UI组件库
















，希望大家喜欢！

Vue3 正式发布已经有一段时间了
  
  
  
  
  
  
  
  
 ，2022年2月也正式变成 Vue 项目的默认版本                 。在过去一年多的时间里 
  
  
  
  
  
  
  
  ，各大组件库                 、框架也紧跟时代的步伐 


 


 


 


 


 


 


 


 

，纷纷对 Vue3 做了大量的支持和优化
 
 
 
 
 
 
 
 
，从个人到公司企业也开始拥抱 Vue3.0 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 。在这个过程中  
   
   
   
   
   
   
   
   ，也陆续涌现出很多优秀的开源组件库或框架 

 

 

 

 

 

 

 

 
，非常值得我们去学习和使用
















。下面本文就给大家整理分享几个 Vue3 实用的Web端UI组件库

 

 

 

 

 

 

 

 

，多了解学习一个新的知识                 ，可以提高我们的“搬砖  
  
  
  
  
  
  
  
  ”效率和速度 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 ，希望对大家有所帮助！

1 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 、Element Plus

Element Plus 一套为开发者
















、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库
  
  
  
  
  
  
  
  
 。Element UI 在 Vue2 中很受开发者欢迎

















，Element Plus 依旧延续了 Vue2 Element UI 的优秀风格                         ，重构了已有的组件 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，并且新增了一些新的组件

























，比如TreeSelect 树形选择
  
  
  
  
  
  
  
  
 、Virtualized Table 虚拟化表格等 
  
  
  
  
  
  
  
  。

Element Plus目前已有近70个组件                 ，在 GitHub 上更是拥有 18.6k+ Star 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 ，正在成为 Github 上最受欢迎的 Vue3 UI 框架之一
















，它以优秀的UI风格 
  
  
  
  
  
  
  
  、及时更新 


 


 


 


 


 


 


 


 

、良好的交互体验
 
 
 
 
 
 
 
 
、更高效的开发和通过SCSS变量的高定制性达到了开发者的期望 


 


 


 


 


 


 


 


 

。

官方网站：https://element-plus.org

国内加速镜像：https://element-plus.gitee.io

源码地址：https://github.com/element-plus/element-plus

2  
   
   
   
   
   
   
   
   、Ant Design Vue

众所周知
  
  
  
  
  
  
  
  
 ，Ant Design 作为一门设计语言面世 
  
  
  
  
  
  
  
  ，经历过多年的迭代和积累 


 


 


 


 


 


 


 


 

，它对 UI 的设计思想已经成为一套事实标准
 
 
 
 
 
 
 
 
，受到众多前端开发者及企业的追捧和喜爱  
   
   
   
   
   
   
   
   ，是前端开发者手中的神兵利器
 
 
 
 
 
 
 
 
。

ant-design-vue 是 Ant Design 的 Vue 实现 

 

 

 

 

 

 

 

 
，组件的风格与 Ant Design 保持同步

 

 

 

 

 

 

 

 

，组件的 html 结构和 css 样式也保持一致                 ，真正做到了样式 0 修改 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 ，组件 API 也尽量保持了一致  
   
   
   
   
   
   
   
   。

ant-design-vue 目前已有60+个组件

















，在 GitHub 上已拥有 17.7k+ Star                         ，Vue3包体积更小 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，更快

























，并且支持 SSR                 ，基本覆盖项目大部分需求 

 

 

 

 

 

 

 

 
。

官方网站：https://www.antdv.com/

源码地址：https://github.com/vueComponent/ant-design-vue

3 

 

 

 

 

 

 

 

 
、arco.design

arco.design 是字节跳动推出的UI组件库 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 ，目前有React和Vue两个版本

 

 

 

 

 

 

 

 

。arco.design 是由 Byte Design 升级而来
















，经过了字节跳动内部的大量的业务沉淀和使用验证
  
  
  
  
  
  
  
  
 ，第一个版本于2021年10月发布 
  
  
  
  
  
  
  
  ，可能了解和使用的人还很少                 。开源社区多一个UI组件库不仅前端繁荣了前端UI库 


 


 


 


 


 


 


 


 

，对程序猿/媛来说又多了一个选择
 
 
 
 
 
 
 
 
，毕竟是大厂出品  
   
   
   
   
   
   
   
   ，还是不错的 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 。

arco.design 为更多中小型企业及个人设计师和开发者提效 

 

 

 

 

 

 

 

 
，创造更多高效美观的 “最佳实践 
  
  
  
  
  
  
  
  
”

















。其产品生态也很丰富

 

 

 

 

 

 

 

 

，风格配置平台（Design Lab） 和 色彩配置工具（Palette） 支持在线构建并实时预览个性化主题和色板                 ，让用户所见即所得的聚焦于设计创作与应用                         。物料市场 （Material Market）和图标平台（Iconbox）提供了完善的工具和流程帮助业务团队快速构建业务定制图标

 

 

 

 

 

 

 

 

、组件                 、模块 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 、页面等可复用资产 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 。中后台最佳实践（Arco Pro） 整理了常见的典型页面场景 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 ，帮助用户更快速地从 0 到 1 构建项目

























。更多的开发优势

















，比如React 和 Vue 同步支持

















、暗黑模式                         、沉浸式的开发文档体验 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 、二次开发和复用能力等                 。

官方网站：https://arco.design/

源码地址：https://github.com/arco-design/arco-design

4

























、Naive UI

这是一个尤大大都推荐的Vue3 UI组件库！为什么尤大大会推荐它呢？

Naive UI 是一款基于当前比较新的 Vue 3.0/TypeScript 技栈开发的前端 UI 组件库                         ，作者来自图森未来公司 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 。虽然不是头部大厂出品 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，但是足够优秀！它提供了80+个精良的组件

























，这些组件可以无缝地融入几乎任何类型的 Vue3应用
















。

Naive UI 是一款漂亮大气                 、交互效果优秀的开源组件库                 ，再加上尤大大的转发推荐 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 ，给 Naive UI 带来了大量的流量
















，目前在Github上已有11.7k Star
  
  
  
  
  
  
  
  
 ，开发文档风趣幽默 
  
  
  
  
  
  
  
  ，相信以后会越来越好
  
  
  
  
  
  
  
  
 。

官方网站：https://www.naiveui.com/

源码地址：https://github.com/tusen-ai/naive-ui

5 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 、DevUI

DevUI是华为云开源的企业级UI组件库 


 


 


 


 


 


 


 


 

，2021年1月9日Vue DevUI 1.0 正式发布
 
 
 
 
 
 
 
 
，支持Vue3.0 
  
  
  
  
  
  
  
  。如今  
   
   
   
   
   
   
   
   ，它已经包含了55个简单
















、易用
  
  
  
  
  
  
  
  
 、灵活的高质量组件 


 


 


 


 


 


 


 


 

。

Vue DevUI 沉淀自华为软开云众多业务的优秀实践 

 

 

 

 

 

 

 

 
，70+社区开发者一起参与共建

 

 

 

 

 

 

 

 

，包含 DatePickerPro 
  
  
  
  
  
  
  
  、Splitter 


 


 


 


 


 


 


 


 

、Ripple 等多个特色组件
 
 
 
 
 
 
 
 
。Vue DevUI 使用积木理论进行组件的设计和开发                 ，尽可能平衡灵活性和易用性  
   
   
   
   
   
   
   
   。对于 Table
 
 
 
 
 
 
 
 
、Tree 等复杂组件 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 ，使用 Composition API 进行交互逻辑的拆分

















，确保组件的可扩展性和可维护性 

 

 

 

 

 

 

 

 
。

官方网站：https://vue-devui.github.io/

源码地址：https://github.com/DevCloudFE/vue-devui

6  
   
   
   
   
   
   
   
   、View Design

View UI Plus 是 View Design 设计体系中基于 Vue.js 3 的一套 UI 组件库                         ，主要用于企业级中后台系统 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，提供了超过 80 个常用底层组件

 

 

 

 

 

 

 

 

。主要特点有丰富的组件和功能

























，满足绝大部分网站场景；提供开箱即用的 Admin 系统 和 快速增删改查表格组件                 ，极大程度节省开发成本；友好的 API  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 ，自由灵活地使用空间；细致 

 

 

 

 

 

 

 

 
、漂亮的 UI；事无巨细的文档；可自定义主题等                 。

View UI Plus是 Vue3.0 版本
















，它的 Vue2.0 叫做 iView ui 是我进入职场用的第一个UI组件库
  
  
  
  
  
  
  
  
 ，是一款不错的开源UI组件库 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 。

官方网站：https://www.iviewui.com/

源码地址：https://github.com/view-design/ViewUIPlus

7

 

 

 

 

 

 

 

 

、KingDesign

KingDesign设计系统是⾦⼭云基于多年的企业级产品设计开发经验 
  
  
  
  
  
  
  
  ，以⾦⼭云设计语⾔为基础 


 


 


 


 


 


 


 


 

，⽤于企业级产品的开源设计系统
 
 
 
 
 
 
 
 
，该系统由组件                 、开发 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 、设计资源

















、⼯具                         、解决⽅案 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 、设计指南组成  
   
   
   
   
   
   
   
   ，⽤户可使⽤KingDesign设计系统快速构建⼀致的数字产品

















。

为了更适⽤于企业级产品的开发和使⽤ 

 

 

 

 

 

 

 

 
，通过⼤量中后台场景的实践

 

 

 

 

 

 

 

 

，King Design设计系统提炼出以下设计原则：⾼效                 ，整体优化设计与前端⼯作流程 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 ，做到全局标准化的产品构建                         。且组件更适⽤于企业操作类的产品

















，为⽤户带来更便捷的体验 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 。统⼀                         ，在产品设计中 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，相同的问题使⽤相同的解决⽅案

























，让产品家族更具⼀致性

























。灵活                 ，为了让设计系统有效地扩展 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 ，King Design设计系统在⼀致性与灵活性之间达到了⼀种平衡
















，可⽀持企业多种业务和产品                 。

官方网站：https://design.ksyun.com/

源码地址：https://github.com/ksc-fe/kpc

8

























、iDux

iDux 是来自深信服科技的前端团队开发的一套企业级中后台 UI 组件库
  
  
  
  
  
  
  
  
 ，致力于提供高效愉悦的开发体验 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 。基于 Vue 3.x + TypeScript 开发, 全部代码开源并遵循 MIT 协议 
  
  
  
  
  
  
  
  ，任何企业                 、组织及个人均可免费使用
















。

iDux包含基础组件 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 、高级组件
















、开发套件
  
  
  
  
  
  
  
  
 。主要特性有：全面拥抱 Composition API 


 


 


 


 


 


 


 


 

，从源码到文档；完全使用 TypeScript 开发
 
 
 
 
 
 
 
 
，提供完整的类型定义；Monorepo 管理模式：cdk, components, pro；开箱即用的高质量组件；灵活的全局配置；深入细节的主题定制能力；国际化语言支持 
  
  
  
  
  
  
  
  。

官方网站：https://idux.site/

源码地址：https://github.com/IDuxFE/idux

9
  
  
  
  
  
  
  
  
 、Balm UI

BalmUI 是一款由 Balm.js （一款类似 Vue CLI 的前端工作流工具）团队打造前端 UI 组件库  
   
   
   
   
   
   
   
   ，基于最新的 Vue 3 构建 

 

 

 

 

 

 

 

 
，开箱即用

 

 

 

 

 

 

 

 

，定制化强                 ，设计风格完全遵循谷歌的 Material Design 设计规范 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 ，组件均可高定制化且可被独立使用

















，是一款交互体验非常优秀的 UI 组件库 


 


 


 


 


 


 


 


 

。

官方网站：https://material.balmjs.com/

源码地址：https://github.com/balmjs/balm-ui

10 
  
  
  
  
  
  
  
  、PrimeVue

PrimeVue 由 PrimeTek Informatics 开发的新 UI 库
 
 
 
 
 
 
 
 
。在官方新闻稿中                         ，PrimeTek 表示“PrimeVue 是最完整的 Vue UI 组件套件,具有 50 多个组件 


 


 


 


 


 


 


 


 

、主题设计器
 
 
 
 
 
 
 
 
、各种 VueCLI 模板和专业支持


 


 


 


 


 


 


 


 

”  
   
   
   
   
   
   
   
   。不过 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，目前已更新到90+个组件

























，如FloatLabel  
   
   
   
   
   
   
   
   、Dock 

 

 

 

 

 

 

 

 
、Chart等组件                 ，而且有多种主体可选和一些独特体验的组件 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 ，目前github上已有3.3k+ Star 

 

 

 

 

 

 

 

 
。不过目前只有英文文档

 

 

 

 

 

 

 

 

。

官方网站：https://primevue.org/

源码地址：https://github.com/primefaces/primevue

11

 

 

 

 

 

 

 

 

、Vuestic UI

Vuestic UI 是一套由 Epicmax 团队开发的一套基于 Vue.js 的 web 开发组件库
















，是一个免费开源的UI框架
  
  
  
  
  
  
  
  
 ，包含50多个功能丰富的组件 
  
  
  
  
  
  
  
  ，希望用 Vue .js 的专业知识以最佳方式构建一个可用性强且全面的开源工具                 。Vuestic UI 在发布后不久 


 


 


 


 


 


 


 


 

，便成为使用 Vue 构建的最受欢迎的组件库之一 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 。

它响应迅速
 
 
 
 
 
 
 
 
，易于定制  
   
   
   
   
   
   
   
   ，具有组件                 、图标和颜色的深入配置选项

















。响应式的设计使这些组件不仅能用在 web PC 项目上 

 

 

 

 

 

 

 

 
，而且几乎适用于任何屏幕大小的分辨率                         。 键盘可用性是 Vuestic 的特色功能

 

 

 

 

 

 

 

 

，在整个框架中提供无缝键盘操作支持                 ，这在其它流行的组件库中是不多见的 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 。支持树摇优化 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 ，减少打包体积

























。Vuestic UI与Vue 3 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 、i18n兼容

















，支持所有现代浏览器                 。

官方网站：https://madewithvuejs.com/vuestic-ui

源码地址：https://github.com/epicmaxco/vuestic-ui

后记

多了解                         ，多学习这些UI组件库 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，一方面可以增加我们的见识

























，多一个组件库就多了一个选择                 ，另一方面我们更多地应该学习这些组件库的设计思想和思路 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 ，从而提高我们自己的能力 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 。这些UI组件库可以根据自己的项目需要选择性地使用
















，希望这篇文章对大家有所帮助
  
  
  
  
  
  
  
  
 ，文章中有不当之处欢迎大家指出并改正 
  
  
  
  
  
  
  
  ，欢迎大家点赞

















、转发                         、关注！

原文链接：https://mp.weixin.qq.com/s?__biz=MzkzNzMyMjQzMQ==&mid=2247491671&idx=1&sn=110df8af2fbd19817b586bac2417b8c6&chksm=c2939287f5e41b91f5b5905fd7b1c34c84a548c495e3c99f222cc78f568f29265093633985f0&token=1874314220&lang=zh_CN#rd添加链接描述