百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程字典 > 正文

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

toyiye 2024-05-09 18:41 18 浏览 0 评论

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

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

Element Plus

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

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

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

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

指标

数值

Star

22k

NPM 周下载

155,168

Issue

1251(Open)+4682(Closed)

PR

397+6027

贡献者

540

组件数

70

Vuetify

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

  • 官网:vuetifyjs.com/
  • GitHub:github.com/vuetifyjs/v…
  • NPM:www.npmjs.com/package/vue…

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

指标

数值

Star

38.4k

NPM 周下载

426,429

Issue

665+12443

PR

125+4792

贡献者

898

组件数

80

Ant Design Vue

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

  • 官网:antdv.com/
  • GitHub:github.com/vueComponen…
  • NPM:www.npmjs.com/package/ant…

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

指标

数值

Star

19k

NPM 周下载

74,447

Issue

173+5115

PR

36+1619

贡献者

243

组件数

67

Quasar

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

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

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

  • 官网:quasar.dev/
  • GitHub:github.com/quasarframe…
  • NPM:www.npmjs.com/package/qua…

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

指标

数值

Star

24.6k

NPM 周下载

102,106

Issue

428+7050

PR

99+4429

贡献者

674

组件数

71

Naive UI

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

  • 官网:www.naiveui.com/
  • GitHub:github.com/tusen-ai/na…
  • NPM:www.npmjs.com/package/nai…

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

指标

数值

Star

14.2k

NPM 周下载

20,900

Issue

622+1889

PR

131+2580

贡献者

264

组件数

80

Arco Design Vue

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

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

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

指标

数值

Star

2.3k

NPM 周下载

4,523

Issue

561+1174

PR

36+1042

贡献者

102

组件数

71

TinyVue

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

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

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

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

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

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

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

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

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

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

指标

数值

Star

1.1k

NPM 周下载

1,548

Issue

85+204

PR

11+759

贡献者

60

组件数

84


作者:Kagol
链接:
https://juejin.cn/post/7310786618390380581

相关推荐

为何越来越多的编程语言使用JSON(为什么编程)

JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...

何时在数据库中使用 JSON(数据库用json格式存储)

在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...

MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)

前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...

JSON对象花样进阶(json格式对象)

一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...

深入理解 JSON 和 Form-data(json和formdata提交区别)

在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...

JSON 语法(json 语法 priority)

JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...

JSON语法详解(json的语法规则)

JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...

MySQL JSON数据类型操作(mysql的json)

概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...

JSON的数据模式(json数据格式示例)

像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...

前端学习——JSON格式详解(后端json格式)

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...

什么是 JSON:详解 JSON 及其优势(什么叫json)

现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...

PostgreSQL JSON 类型:处理结构化数据

PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...

JavaScript:JSON、三种包装类(javascript 包)

JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...

Python数据分析 只要1分钟 教你玩转JSON 全程干货

Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...

比较一下JSON与XML两种数据格式?(json和xml哪个好)

JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...

取消回复欢迎 发表评论:

请填写验证码