2024 年最值得推荐的 7 个 Vue3 组件库

news2024/11/25 10:25:09

你好,我是 Kagol。

Vue 是一款易学易用,性能出色,适用场景丰富的渐进式 JavaScript 框架,深受广大开发者的喜爱,Vue3 更是推出了 Composition API,让逻辑复用更友好。

马上就到 2024 年了,如果你的项目正在使用 Vue3,或者打算升级 Vue3,以下 Vue3 组件库或许是不错的选择。

Element Plus

image.png

Element UI 是国内使用最广泛的 Vue2 组件库之一,而 Element Plus 是 Element UI 的升级版,基于 Vue3 和 TypeScript,提供了 70 多个易于使用的组件。

  • 官网:https://element-plus.org/
  • GitHub:https://github.com/element-plus/element-plus
  • NPM:https://www.npmjs.com/package/element-plus

Element Plus 于 2020年9月发布第一个 Beta 版本,2022年2月发布第一个稳定版本 v2.0.0,目前基主要由社区开发者在维护。

以下是截止到 2023.12.9 的数据情况:

指标数值
Star22k
NPM 周下载155,168
Issue1251(Open)+4682(Closed)
PR397+6027
贡献者540
组件数70

Vuetify

image.png

Vuetify 基于 Material Design 设计规范,提供 80 多个组件,拥有动态主题、全局默认值、应用框架等丰富而强大的特性,它以提供给开发者丰富的工具,给用户良好而丰富的使用体验为最终目标。

  • 官网:https://vuetifyjs.com/
  • GitHub:https://github.com/vuetifyjs/vuetify
  • NPM:https://www.npmjs.com/package/vuetify

Vuetify 是一个国外的老牌 Vue 组件库,2016年7月发布第一个版本,2018年2月发布 v1.0.0 稳定版本,2022年11月发布 v3.0.0 正式版本,开始支持 Vue3。目前主要由 John Leider 和 KaelWD 在开发和维护。

指标数值
Star38.4k
NPM 周下载426,429
Issue665+12443
PR125+4792
贡献者898
组件数80

Ant Design Vue

image.png

Ant Design 是全球历史最悠久和最受欢迎的组件库之一,官方提供 React 版本,Ant Design Vue 是它的 Vue 版本,由社区开发和维护,遵循 Ant Design 设计规范,提供 67 个组件。

  • 官网:https://antdv.com/
  • GitHub:https://github.com/vueComponent/ant-design-vue
  • NPM:https://www.npmjs.com/package/ant-design-vue

Ant Design Vue 于 2017年9月创建代码仓库,2018年8月发布第一个版本,2022年4月发布 v3.0.0 版本,开始支持 Vue3,目前主要由 tangjinzhou 在开发和维护。

指标数值
Star19k
NPM 周下载74,447
Issue173+5115
PR36+1619
贡献者243
组件数67

Quasar

image.png

Quasar 不仅仅是一个组件库,而是一个基于 Vue 的开源框架,可以帮助 Web 开发人员快速创建多种风格的响应式 ++ 网站/应用程序:

  • SPA(单页应用程序)
  • SSR(服务器端渲染应用程序)(+可选的 PWA 客户端接管)
  • PWA(渐进式 Web 应用程序)
  • BEX(浏览器扩展)
  • 通过 Cordova 或 Capacitor 的移动应用程序(Android、iOS 等)
  • 多平台桌面应用程序(使用 Electron)

Quasar 提供 71 个组件和丰富的工具,实现编写一次代码,同时将其部署为网站、移动应用程序和桌面应用程序,可以帮助开发者快速开发一款跨平台的应用程序。

  • 官网:https://quasar.dev/
  • GitHub:https://github.com/quasarframework/quasar
  • NPM:https://www.npmjs.com/package/quasar

Quasar 于 2015年10月创建代码仓库,2019年7月发布第一个稳定版本 v1.0.0,2021年6月发布 v2.0.0 版本,开始支持 Vue3,目前主要由 rstoenescu 在开发和维护。

指标数值
Star24.6k
NPM 周下载102,106
Issue428+7050
PR99+4429
贡献者674
组件数71

Naive UI

image.png

Naive UI 由图森未来公司创建,只支持 Vue3,不支持 Vue2,一个有点意思的 Vue3 组件库,这体现在 Naive UI 官网文档的每一处文案中,目前提供 80 个组件。

  • 官网:https://www.naiveui.com/
  • GitHub:https://github.com/tusen-ai/naive-ui
  • NPM:https://www.npmjs.com/package/naive-ui

Naive UI 于 2019年5月创建代码仓库,2021年6月发布第一个版本 v2.11.0,目前主要由 07akioni 在开发和维护。

指标数值
Star14.2k
NPM 周下载20,900
Issue622+1889
PR131+2580
贡献者264
组件数80

Arco Design Vue

image.png

Arco Design 是由字节跳动 GIP UED 团队和架构前端团队联合推出的企业级设计系统,Arco Design Vue 是基于 Arco Design 的 Vue3 组件库,于2021年10月开源,提供 71 个组件。

  • 官网:https://arco.design/vue
  • GitHub:https://github.com/arco-design/arco-design-vue
  • NPM:https://www.npmjs.com/package/@arco-design/web-vue

Arco Design Vue 于 2021年1月创建代码仓库,并发布第一个版本 v2.0.0,目前主要由 flsion 在开发和维护。

指标数值
Star2.3k
NPM 周下载4,523
Issue561+1174
PR36+1042
贡献者102
组件数71

TinyVue

image.png

最后给大家推荐一款今年2月份刚开源的新兴组件库:TinyVue。

TinyVue 是一套跨端、跨框架的企业级 UI 组件库,基于 Renderless 无渲染组件设计构架,实现了一套代码同时支持 Vue 2 和 Vue 3,支持 PC 端和移动端,包含 84 个功能丰富的组件,内置 4 套精美主题。

  • 官网:https://opentiny.design/tiny-vue
  • GitHub:https://github.com/opentiny/tiny-vue
  • NPM:https://www.npmjs.com/package/@opentiny/vue

TinyVue 最大的特点就是基于 Renderless 无渲染组件设计架构实现了跨端跨框架,让各框架组件库共用同一套组件逻辑,让组件库在各框架之间平滑迁移。

短期来看,一个具体的业务一般已经选定了前端框架,不容易在框架之间迁移;

但从长远来看,技术会演进,前端框架会变迁,比如早期的 jQuery 变迁到现在的三大框架,未来可能三大框架不流行了,大家都使用新框架,我们也希望能让使用 TinyVue 的业务能够快速迁移到新框架,真正实现面向未来。

OpenTiny 前端组件库正式开源啦!面向未来,为开发者而生

TinyVue 最早在2014年在公司内部开始孵化,现已服务于公司内部大量的业务,今年刚开源,也希望朋友们多多支持我们,给我们提提建议,欢迎在评论区留言。

从自研走向开源的 TinyVue 组件库

TinyVue 于 2022年12月创建代码仓库,并发布第一个 Alpha 版本,2023年2月发布第一个正式版本 v3.5.0,目前主要由 TinyVue 团队开发和维护。

指标数值
Star1.1k
NPM 周下载1,548
Issue85+204
PR11+759
贡献者60
组件数84

联系我们

GitHub:https://github.com/opentiny/tiny-vue(欢迎 Star ⭐)

官网:https://opentiny.design/tiny-vue

B站:https://space.bilibili.com/15284299

公众号:OpenTiny

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

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

相关文章

html通过CDN引入Vue使用Vuex以及Computed、Watch监听

html通过CDN引入Vue使用Vuex以及Computed、Watch监听 近期遇到个需求,就是需要在.net MVC的项目中,对已有的项目的首页进行优化,也就是写原生html和js。但是咱是一个写前端的,写html还可以,.net的话,开发也…

dell r720远程网络安装ubuntu20.04(无U盘)

登陆后界面,在主界面上,我们就可以看到各个硬件组件的状态。在快速启动任务栏中,可以对系统电源进行操作,如开机、关机等。安装操作系统,在虚拟控制台预览处点击>启动 按照浏览器出现的提示确定安装控件等&#x…

西南科技大学数字电子技术实验四(基本触发器逻辑功能测试及FPGA的实现)FPGA部分

实验目的1、掌握基本RS触发器、集成D触发器和JK触发器的逻辑功能及测试方法。 2、熟悉D触发器和JK触发器的触发方法。 3、熟悉用JK和D触发器构成其他功能触发器的方法。 4、学会用FPGA实现本实验内容。 实验原理1、D触发器 Qn+1 = D 2、JK触发器 3、RS触发器 程序清单(每…

day15_java的网络编程(简述)

计算机网络 一、什么是计算机网络 把分布在不同地理区域的计算机与专门的外部设备用通信线路互连成一个规模大、功能强的网络系统,从而使众多的计算机可以方便地互相传递信息,共享硬件、软件、数据信息等资源。 二、计算机网络主要功能 资源共享 信息…

SpringBoot整合RocketMQ,高手都是这么玩的!

今天我们来讨论如何在项目开发中优雅地使用RocketMQ。本文分为三部分,第一部分实现SpringBoot与RocketMQ的整合,第二部分解决在使用RocketMQ过程中可能遇到的一些问题并解决他们,第三部分介绍如何封装RocketMQ以便更好地使用。 1. SpringBoo…

微信小程序、uniapp选择器,包含一级,二级级联,三级级联

效果预览: 已知问题: 不能与页面下拉一起使用 滑动选择后,scroll-view指定scrollTop时,scrollview滚动会有500ms左右的延迟(官方help),现在加了个loaing 参数说明: show(类型:Boolean,默认 false):控制组件显示隐藏 list(类型:Array):选择器绑定的数据 type(类型…

我的网站服务器被入侵了该怎么办?

最近有用户咨询到德迅云安全,说自己再用的网站服务器遇到了入侵情况,询问该怎么处理入侵问题,有什么安全方案可以解决服务器被入侵的问题。下面,我们就来简单讲下服务器遇到入侵了,该从哪方面入手处理,在预…

pandas 使用方法(1)

目录 1. excel 表格处理 (1) 读取excel 表格 (2) 抽取excel表部分列数据 (3) 保存数据到excel表格 (4) 保存到 excel 表中的不同sheet 2. 判断二维数组中的某个数值是否为空 3. 删除二维数组中的空行 4. 在列表中添加某列属性 本文是将使用pandas过程中遇到的问题进行了…

SpringDataJPA基础

简介 Spring Data为数据访问层提供了熟悉且一致的Spring编程模版,对于每种持久性存储,业务代码通常需要提供不同存储库提供对不同CURD持久化操作。Spring Data为这些持久性存储以及特定实现提供了通用的接口和模版。其目的是统一简化对不同类型持久性存储…

基于Java SSM框架实现个性化影片推荐系统项目【项目源码+论文说明】

基于java的SSM框架实现个性化影片推荐系统演示 摘要 随着科学技术的飞速发展,社会的方方面面、各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,个性化影片推荐系统当然也不能排除在外。个性化影片推荐系统是以实际运用…

【Citespace】从Citespace开始的引文可视化分析

CiteSpace 译“引文空间”,是一款着眼于分析科学分析中蕴含的潜在知识,是在科学计量学、数据可视化背景下逐渐发展起来的引文可视化分析软件。由于是通过可视化的手段来呈现科学知识的结构、规律和分布情况,因此也将通过此类方法分析得到的可…

经典目标检测YOLO系列(一)引言_目标检测架构

经典目标检测YOLO系列(一)引言_目标检测架构 一个常见的目标检测网络,其本身往往可以分为一下三大块: Backbone network,即主干网络,是目标检测网络最为核心的部分,backbone选择的好坏,对检测性能影响是十…

Jol-分析Java对象的内存布局

Jol-分析Java对象的内存布局 Open JDK提供的JOL(Java Object Layout)工具为我们方便分析、了解一个Java对象在内存当中的具体布局情况。本文实验环境为64位HotSpot虚拟机。 Java对象的内存布局 Java的实例对象、数组对象在内存中的组成包括:对象头、实例数据和内存…

一键优化工具,十分不错的win7、win10系统优化的工具,可以帮助用户轻松快速优化系统,供大家学习研究参考~

主要功能 01、禁用索引服务 02、禁止window发送错误报告 03、禁用"最近使用的项目” 04、关闭Windows Defender 05、关闭防火墙 06、检查更新而不自动下载更新 07、启动电源计划“高性能” 08、调整电源选项 09、禁用休眠(删除休眠文件) 10、开启快速启动 11、…

【lesson3】数据库表的操作

文章目录 创建修改修改表名增加表类型修改表的某一类型的类型修改表某一类型的类型名 删除删除表的某一列删除表 查看查看表信息查看表内容 创建 建表指令: 查看是否建表成功: 查看表的具体信息: 修改 修改表名 法一:修改…

yolov5目标检测

一、安装 1.源码下载 git clone git://github.com/ultralytics/yolov5.git cd yolov5 2.环境配置 conda create -n yolov5 python3.8 conda activate yolov5 nvcc -V查看cuda版本 pytorch官网下载对应版本,例如当cuda版本为11.6 pip install torch1.13.1cu…

阿里云服务器租用价格分享,阿里云服务器热门配置最新活动价格汇总

在我们购买阿里云服务器的时候,1核2G、2核2G、2核4G、2核8G、4核8G、8核16G、8核32G等配置属于用户购买最多的热门配置,1核2G、2核2G、2核4G这些配置低一点的云服务器基本上能够满足绝大部分个人建站和普通企业用户建站需求,而4核8G、8核16G、…

Vue之模板语法

模板语法有两大类&#xff1a; 1.插值语法 2.指令语法 让我为大家介绍一下吧&#xff01; 一、插值语法 功能:用于解析标签体内容。 写法: {{xxx}}&#xff0c;xxx是js表达式&#xff0c;且可以直接读取到data中的所有属性。 举个例子&#xff1a; <!DOCTYPE html> &l…

六级高频词汇3

目录 单词 参考链接 单词 400. nonsense n. 胡说&#xff0c;冒失的行动 401. nuclear a. 核子的&#xff0c;核能的 402. nucleus n. 核 403. retail n. /v. /ad. 零售 404. retain vt. 保留&#xff0c;保持 405. restrict vt. 限制&#xff0c;约束 406. sponsor n. …

LinuxBasicsForHackers笔记 -- BASH 脚本

你的第一个脚本&#xff1a;“你好&#xff0c;黑客崛起&#xff01;” 首先&#xff0c;您需要告诉操作系统您要为脚本使用哪个解释器。 为此&#xff0c;请输入 shebang&#xff0c;它是井号和感叹号的组合&#xff0c;如下所示&#xff1a;#! 然后&#xff0c;在 shebang …