vue3 几款值得推荐的UI组件库

news2025/1/10 17:12:46

推荐几个比较流行的VUE3 UI框架,同时提供出色的开发人员体验,合理利用,又或者学习借鉴都是不错的选择,排名不分先后。

Ant Design Vue

官方网站:https://2x.antdv.com/components/overview/

Ant Design Vue 是一个非常成熟的框架,使用 Ant Design Vue 创建用户界面非常简单,这些组件可以适应各种图标样式、字体和黑色主题。Ant Design Vue 不断改进其60多个组件,基本覆盖项目大部份需求,而且使它们变得更好,更易于访问。
在这里插入图片描述
Vue3 上的 Ant Design 包更小,感觉更轻,并且支持 SSR(还包括组合API),Ant Design 拥有成熟的复杂组件,如数据表、统计框、pop确认、模态和弹出窗口。

Ant Design Vue 在 GitHub 上拥有 15k+ 颗星,每周下载量为 49k,数据已经说明了它的受欢迎程度。

BalmUI

官方网站:https://next-material.balmjs.com/#/

BalmUI 已经发布了他们的 9.0 版本了,该版本支持Vue3。Balm 基于谷歌的 Material Design,这就是为什么它看起来很熟悉。Balm 附带 Vue 插件和指令,以及从简单到复杂的高度可定制的组件。

在这里插入图片描述

BalmUI 发展非常迅速,如果想使用 Material Design 风格,使用复杂的内置指令(如 debouncing 和 UI 波纹)在创建自定义组件时能派上用场,那么它非常适合 Vue3 项目。

Wave UI

官方网站:https://antoniandre.github.io/wave-ui/

WaveUI 在Vue3 发布后进行了良好的定位,WaveUI 的开发是在 Vue3 仍处于alpha阶段时就开始了,其目标是在其API稳定后立即支持它,使其成为首批 Vue3 UI框架之一。

在这里插入图片描述

WaveUI 拥有40多个漂亮且响应迅速的组件,它们的范围从旋转器到日历,以及介于两者之间的任何东西。WaveUI 还提供实用程序、可定制性和成熟的集成表单验证功能。

WaveUI 提供的组件非常漂亮,动画效果也非常好,它的风格在整个框架中是一致的。企业级响应式 Vue3 应用程序不错的选择。

Vuestic

官方网站:https://vuestic.dev/

Vuestic 是 Vue 最漂亮的开源管理面板之一,擅长编写可维护的 Vue 代码,制作灵活的组件和接口。

在这里插入图片描述

该团队最近发布了 Vuestic 的 Vue3版本,包含了流行的 Vuestic Admin UI 和更多的组件。Vuestic 强调它对键盘导航的开箱即用支持,由于它提供的用户体验,这个特性在前端社区很受欢迎。

Vuestic 提供了 50 多个具有独特功能和广泛可配置性的组件,应式设计,这些组件几乎适用于所有屏幕分辨率。Vuestic 在整个框架中提供无缝翻译支持和键盘可访问性。

Vuestic 已经凭借其漂亮的组件目录确立了自己作为最美观的 Vue3 UI 框架之一的地位。他们现在正在加快步伐创建更复杂的组件,例如日期选择器或数据表,它们肯定会像他们当前的产品一样具有创造性。

Element Plus

官方网站:https://element-plus.org/#/zh-CN

Element+ 已经在 Vue2 中声名鹊起,Element+ 为 Vue3 带来了大量不引人注目的组件,创建一个非常复杂的应用程序所需的大部分内容都已经制作完成并可供使用。Element+ 提供成熟的日期和时间选择器、树、时间线和日历组件。

在这里插入图片描述

Element+ 甚至提供开发人员在构建 UI 界面时可能需要的最细微的部件,从简单的动画到框架范围的国际化系统,可以与 i18n 配对使用以创建自定义翻译,甚至添加非内置语言。

Element+ 在 GitHub 上拥有 11.1k+ 颗星,正在成为 Github 上最受欢迎的 Vue3 UI 框架之一,它以出色的问题管理、及时更新、可插入组件和通过SCSS变量的高定制性达到了开发者的期望。

Ionic

官方网站:https://ionicframework.com/docs/vue/overview

Ionic 是最早提供 Vue3 支持的 UI 框架之一, Ionic 更倾向于移动 UI,团队知道如何迎合和维护一个优秀的 UI 框架。

在这里插入图片描述
Ionic Vue 是一个很成熟的框架,有一个令人震惊的社区、大量的 StackOverflow 问题、企业支持和一个拥有核心成员的大型 Slack 频道,这使得可以在需要帮助时轻松获得支持。

Ionic Vue 框架在 Github上有 45k+ 颗星,已经被很多大公司使用,包括空客(Airbus)和艺电(Electronic Arts),而 Ionic 的团队以擅长维护他们的UI框架而闻名,这是现在和未来的一个很好的选择。

Naive UI

官方网站:https://www.naiveui.com/zh-CN/os-theme

Naive UI 在 Twitter 上发布,然后被 Vue 的创建者转发,给这个新生的组件库带来了大量流量。现在,Naive UI 在不到三个月的时间里就在 GitHub 上获得了5.1k 颗星。

在这里插入图片描述

它提供了70多个制作精良的组件,这些组件可以无缝地融入几乎任何类型的 Vue3应用。Naive的组件性能优异,可定制性极强,并支持 TypeScript,提供了很棒的开发体验。

文档网站易于浏览,并具有完整的自定义输入,可帮助开发人员预览组件在他们自己的主题中的外观。可以使用这些选项来创建自己的带有颜色图案和字体的完整主题。这个定制的主题可以下载并轻松添加到应用程序中以覆盖默认值。

Quasar

官方网站:https://next.quasar.dev/

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

在这里插入图片描述
Quasar 框架似乎是基于 Material Design,但是一旦开始,一切都可以很好地定制以适应自己的设计体系。

对 Vue3 支持也很迅速,而且 Quasar 已经发布了几乎所有的 v1 组件、插件和指令。此外,他们还发布了可组合组件,帮助开发人员更深入地了解 Quasar API。

PrimeVUE

官方网站:https://primefaces.org/primevue/showcase/#/setup

PrimeVUE 也算是最早支持 Vue3 的框架之一,它并没有让人失望。PrimeVUE 拥有 80 多个组件,证明自己是此列表中组件范围最广的框架之一。

在这里插入图片描述

组件包括带有仪表、滑块、树、图形、拆分按钮、旋钮、图表等的密码表单。PrimeVUE 甚至还集成了一个表单验证库 Vuelidate。附带了预先制作的主题,并提供了一个成熟的可视化编辑器,帮助开发人员定制自己的主题。

总结

随着生态系统的迁移,从 Vue2 迁移到 Vue3 将变得更加容易,因此,借助 Vue3 提供的API和响应性,并结合这些 UI 框架将会让项目开发变得更好、更快、更灵活。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/75426.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PingCAP 成为中国唯一入选 Forrester Wave 数据库厂商,被评为卓越表现者

2022 年 12 月 6 日,国际权威研究机构 Forrester 发布了「Forrester Wave™: Translytical Data Platforms, Q4 2022 」报告,企业级开源分布式数据库厂商 PingCAP 作为中国唯一入围的数据库厂商,首次参评该报告即获评“卓越表现者&#xff08…

微服务框架 SpringCloud微服务架构 29 ES 集群 29.3 集群职责及脑裂

微服务框架 【SpringCloudRabbitMQDockerRedis搜索分布式,系统详解springcloud微服务技术栈课程|黑马程序员Java微服务】 SpringCloud微服务架构 文章目录微服务框架SpringCloud微服务架构29 ES 集群29.3 集群职责及脑裂29.3.1 ES 集群的节点角色29.3.2 ES集群的分…

RAID图解

RAID图解什么是RAID各种 RAID 详解RAID 0RAID 1RAID 2(已淘汰)RAID 3RAID 4RAID 5RAID 6RAID 7RAID 01RAID 10RAID 10和RAID 01有何区别?实操教程其他问题最近在涉及到服务器安装系统这块才了解到RAID这个知识点,上网了解该知识&a…

Nginx 动静分离相关配置解析

Nginx 动静分离相关配置解析 本篇主要介绍nginx 动静分离相关配置解析 概述 动静分离是让动态网站里的动态网页根据一定规则把不变的资源和经常变的资源区分开来,动静资源做好了拆分以后,我们就可以根据静态资源的特点将其做缓存操作,这就是…

基于jsp+mysql+ssm智慧仓库进销存系统-计算机毕业设计

项目介绍 企业仓库库存系统的设计在SSM的框架下,采用JAVA编程语言和JSP技术,,并使用Mysql作为系统的数据库。该系统设计了强大的功能模块,考虑了企业库存管理的各个方面。这些主要功能模块分别是系统用户管理、用户信息管理、商品…

CUDNN与CUDA的踩坑与记录

CUDNN与CUDA的踩坑与记录 CUDA的安装 nvidia-smi看显卡驱动能够安装的最高版本的CUDA下载CUDA–>点击安装过程去掉显卡驱动安装完成的结果如下:Summary Driver: Not Selected Toolkit: Installed in /usr/local/cuda-10.2/ Samples: Installed in /home/g…

【世界杯中的安全思考】工控设备

目录 1、总述 2、半自动越位技术:人工智能辅助裁判 3、卡塔尔的智能道路 4、体育场的冷却技术 5、医疗援助的可穿戴设备 6、实时导航 7、照明系统 8、感官观察室 1、总述 从世界杯带来的科技感,可以看出大到球场,小到足球,…

厨房装修竟然有这么多你不知道的事

每个家庭的厨房大小、形状不同,厨房的建筑结构在房子中往往也是比较复杂的,橱柜等设施如何安置,都要因地制宜,很难说怎样做最好。但这并不意味着厨房的布局没有规律可循。在规划厨房布局时,最简单的办法就是按照做饭的…

微服务框架 SpringCloud微服务架构 29 ES 集群 29.1 集群结构介绍

微服务框架 【SpringCloudRabbitMQDockerRedis搜索分布式,系统详解springcloud微服务技术栈课程|黑马程序员Java微服务】 SpringCloud微服务架构 文章目录微服务框架SpringCloud微服务架构29 ES 集群29.1 集群结构介绍29.1.1 ES集群结构29 ES 集群 29.1 集群结构…

银行软件测试简历模板,找工作的小伙伴看过来了

目录 个人简历 教育背景 工作经历 自我评价 专业技能 总结 重点:配套学习资料和视频教学 个人简历 姓  名: 性  别: 学  历: 经  验: 手  机: 邮  箱: 政治面貌&#…

水滴公司Q3财报引股价增长,保险业复苏“第一枪”打响了?

2020年以来,保险行业整体都笼罩在发展失速的低迷中。 2020年,在保险中介监管信息系统执业登记的保险销售从业人员有971.2万人,而2022年6月,这项数据为570.7万人,接近腰斩。公开数据显示,2022前三季度&…

DDR4时序标准规范(二)

DDR4时序标准规范编码模式寄存器(MRx)模式寄存器0(MR0)CAS延迟测试模式TM写恢复(WR)/读预充DLL(延时锁相环)复位模式寄存器1(MR1)DLL(延时锁相环)使能/禁用ODT RTT(标称)值AL(附加延迟)写入均衡终端数据选通(TDQS)模式寄存器2(MR2)CAS写延迟低功耗自动自…

在ros中创建yolov5-onnxruntime功能包

文章目录 工作目录依赖库ROS其他依赖库Yolov5-onnxruntimeCMakeLists.txt编译可能存在的问题工作目录 在vscode中新建功能包apple_detect 依赖库 ROS cv_bridgegeometry_msgsimage_transportmessage_generationroscpprospysensor_msgsstd_msgs其他依赖库 opencv4.6.0onnxru…

计算机毕业设计ssm+vue基本微信小程序的心理咨询服务系统 uniapp 小程序

项目介绍 随着计算机技术的发展,带来社会各行业的进步,信息化逐渐运用到人们的生活中。传统模式的会员心理健康管理满足不了现代人的生活追求,服务质量、服务速度,之前的很多网站由于功能、或者框架设计等原因,无法完美的展现它的特色,优势,浪费了很多资源。使用管理系统进行管…

绿色荧光试剂210236-90-1,Fitc-TSA,Fluorescein TSA,Fitc-Tyramide荧光素酪胺

试剂基团反应特点(Reagent group reaction characteristics): Fluorescein Tyramide(荧光素酪胺)是一种绿色荧光试剂,广泛用于 IHC、ICC、FISH 和多色 FISH 中的酪胺信号放大 (TSA)。 HRP 催化多个酪胺分子…

2023最新SSM计算机毕业设计选题大全(附源码+LW)之java垃圾回收系统j16l0

这个选题的话其实有很多的,就看你自己能接受怎么样的,比如可以做网站类、系统类、小程序类、安卓app、大数据类等等,这个也要看你个人能力和技术问题,如果技术小白或者有一点点基础的话建议选择网站类和系统类的,如果有…

用HTML+CSS做一个漂亮简单大学生校园班级网页

🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (10…

数据时代,漫谈数据建模

不管什么样的模型都可以理解为一种预设,比如像一张大宽表,它的维度和指标在大宽表中就是固定的,只是维度列多一些,指标多一些,给了用户更多的一种组合维度和指标的可能,并不是说就没有模型的概念。 在理解…

Python实战案例,PyQt5模块,实现疫情信息快速查看工具(附源码)

前言 今天给大家介绍的是Python疫情信息快速查看工具,在这里给需要的小伙伴们代码,并且给出一点小心得。 PyQt概述 PyQt5是Qt框架的Python语言实现,由Riverbank Computing开发,是最强大的GUI库之一。PyQt提供了一个设计良好的窗…

springcloud3 EurekaClient单机搭建2

一 EurekaClient-provider提供者搭建 工程架构 1.1 搭建步骤 1.1.1 复制模块 复制mscloud-provider模块变成 mscloud-provider8004 1.1.2.修改pom 新增eureka-client的依赖 完整代码 <dependency><groupId>junit</groupId><artifactId>junit</…