非常好用的7个Vue3组件库!!【送源码】

news2024/12/24 2:20:59

说到Vue,怎能不提Vue3呢?

它的大名鼎鼎主要归功于一项革命性的创新——Composition API。

这个新功能为逻辑复用带来了前所未有的友好性和灵活性,让开发者们在构建应用时如鱼得水。

如果你现在正在使用Vue3,或者在新的一年考虑将你的项目升级至Vue3,那你绝对不能错过对Vue3组件库的探索。

这些组件库不仅能让你的开发工作更加高效,还能让你的应用在性能和用户体验上更上一层楼。


Element Plus

图片

 

Element Plus 是一个基于 Vue.js 3.0 的组件库,它是 Element UI 的升级版本。Element Plus 为 Vue 3 提供了大量实用的 UI 组件,包括按钮、表格、表单、对话框、菜单等等,使得开发者可以更加方便快捷地构建用户界面。

图片


Vuetify

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

要开始使用 Vuetify 3,只需将以下代码粘贴到你的终端:

yarn create vuetify

此命令在使用脚手架生成您的 Vue / Vuetify 3 项目之前会提示您有几个配置选项。

success Installed "create-vuetify@x.x.x" with binaries:
    - create-vuetify

? Project name (项目名): ❯ vuetify-project //生成应用程序的文件夹
? Use TypeScript (使用 TypeScript)?: ❯ No / Yes
? Would you like to install dependencies with yarn, npm, or pnpm?:
  ❯ yarn
    npm
    pnpm
    bun
    none

使用脚手架搭建完成后,通过运行以下命令启动 vite 开发服务器:

cd vuetify-project
yarn dev

Ant Design Vue

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

图片

 


Quasar

Quasar框架是一个基于Vue.js的框架,用于使用一个代码库开发跨平台的应用程序。这有助于节省开发成本。

图片

 


Naive UI

图片

图片

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


Arco Design Vue

由跳动 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

图片


TinyVue

一套跨端、跨框架的企业级 UI 组件库,支持 Vue 2 和 Vue 3,支持 PC 端和移动端。

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

  • GitHub:https://github.com/opentiny/tiny-vue

  • NPM:https://www.npmjs.com/package/@opentiny/vue

TinyVue 的核心特色在于其采用了 Renderless 无渲染组件设计架构,实现了跨平台和跨框架的兼容性。这种设计使得不同框架的组件库能够共享相同的组件逻辑,从而实现了在各种框架间的无缝迁移和集成。

图片

—— EOF ——

福利:

扫码回复【图书】可免费领取图书管理系统源码

图片

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

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

相关文章

reflutter工具实践之--xx一番赏app

此文章已经录制b站视频: flutter逆向案例-某某一番赏_哔哩哔哩_bilibili 一、工具介绍--reFlutter 这个框架帮助 Flutter 应用逆向工程,使用 Flutter 库的补丁版本,该版本已经编译并准备好重新打包应用。此库修改了快照反序列化过程&#…

SpringCloudNetflix组件整合

SpringCloudNetflix组件整合 Eureka注册中心 Eureka是什么 Eureka是netflix的一个子模块,也是核心模块之一,Eureka是一个基于REST的服务,用于定位服务,以实现云端中间层服务发现和故障转移。服务注册与发现对于微服务架构来说是…

“Dream Machine“震撼登场!免费推出的AI电影级巨制在网络上引爆热潮

"巅峰初现!视频AI新星‘梦幻制造者’华美登场! 在视频生成技术的赛道上,Luma AI昨日骄傲地揭开了其旗舰创新——梦幻制造者(Dream Machine)的神秘面纱,凭借无与伦比的文本到视频及图像到视频转换技术…

Cyber Weekly #11

赛博新闻 1、苹果召开2024年WWDC开发者大会 本周二(6月11日)凌晨1点,苹果召开2024年全球开发者大会,宣布与OpenAl合作,在iOS18、iPadOS18和macOS Sequoia中全面支持GPT-4o。用户在询问Siri问题时,Siri可以…

Oracle 入门--前提

目录 1.sqlplus 2.dual是什么? 3.SQL语句的种类 4.Oracle是如何工作的 5.Oracle查看配置文件 6.修改配置文件 7.常用的参数设置 1.sqlplus 管理数据库:启动,关闭,创建,删除对象......查看数据库的运行状态&…

01 - matlab m_map地学绘图工具基础函数理解(一)

01 - matlab m_map地学绘图工具基础函数理解(一) 0. 引言1. m_demo2. 小结 0. 引言 上篇介绍了m_map的配置过程,本篇开始介绍下m_map中涉及到的所有可调用函数。如果配置的没有问题,执行">>help m_map"可以看到类…

戴尔第十一代十二代十三代处理器重装系统找不到驱动程序

一、戴尔第十一代十二代十三代处理器重装系统找不到驱动程序 VMD(Volume Management Device)是针对下一代存储推出的部署方案。这套方案支持从 PCIe 总线对 NVMe 固态盘进行热升级和更换,而无需关闭系统,同时标准化 LED 管理可帮助…

云计算【第一阶段(14)】Linux的目录和结构

一、Liunx目录结构 1.1、linux目录结构 linux目录结构是树形目录结构 根目录(树根) 所有分区,目录,文件等的位置起点整个树形目录结构中,使用独立的一个"/",表示 1.2、常见的子目录 必须知道 目录路径目…

UniRx 入门

Reactive X 是 Reactive Extensions 的缩写,一般简写为 Rx,最初是 LINQ 的一个扩展,由微软的团队开发,Rx 是一个编程模型,目标是提供一致的编程接口,帮助开发者更方便的处理异步数据流,支持大部…

Apipost模拟HTTP客户端

模拟HTTP客户端的软件有很多,其中比较著名的就有API-FOX、POSTMAN。 相信很多小伙伴都使用POSTMAN。这篇博客主要介绍Apipost的原因是,Apipost无需下载,具有网页版。 APIFOX的站内下载: Api-Fox,类似于PostMan的软件…

关于HTTP劫持,该如何理解、防范和应对

一、引言 HTTP劫持(HTTP Hijacking)是一种网络安全威胁,它发生在HTTP通信过程中,攻击者试图通过拦截、篡改或监控用户与服务器之间的数据流量,以达到窃取敏感信息或执行恶意操作的目的。今天我们就来详细了解HTTP劫持…

嵌入式实训day5

1、 from machine import Pin import time # 定义按键引脚控制对象 key1 Pin(27,Pin.IN, Pin.PULL UP) key2 Pin(26,Pin.IN, Pin.PULL UP)led1 Pin(15,Pin.ouT, value0) led2 Pin(2,Pin.ouT, value0) led3 Pin(0,Pin.ouT, value0) # 定义key1按键中断处理函数 def key1 ir…

JavaFX 图像视图

JavaFX ImageView 控件可以在 JavaFX GUI 中显示图像。ImageView 控件必须添加到场景图中才能可见。JavaFX ImageView 控件由类表示 javafx.scene.image.ImageView。 创建一个 ImageView 通过创建类的实例来创建 ImageView 控件实例ImageView。类的构造函数ImageView需要一个…

【JKI SMO】框架讲解(二)

JKI State Machine 讲解 将JKI State Machine 模板拖曳到程序框图中, 如下图, 此模板会默认放置一个OK按钮在前面板中,用于提示用户如何增加一个简单的用户事件去使用此框架。 “Event Structure”,Idle:此分支可以设…

---异常---

我们在运行程序时总遇到各种与报错,数组越界,空指针的引用,这些在java中都称为异常 对于不同的错误都具有一个与他对应的异常类来秒描述 这是对于数组越界这个类里有的方法,这些是描述异常的 在java中有一个完整的描述异常的类的…

JavaFX 节点

JavaFX Node类javafx.scene.Node是添加到JavaFX 场景图的所有组件 的基类(超类) 。JavaFX Node 类是抽象的,因此你只需将 Node 类的子类添加到场景图中。场景图中的所有 JavaFX Node 实例共享一组由 JavaFX Node 类定义的公共属性。本 JavaFX…

运行vue3项目相关报错

1. VSCode打开TSVue3项目很多地方报错 报错内容 几乎所有文件都会出现未知飘红 error Delete CR prettier/prettier报错原因 插件冲突,Windows系统回车换行符与MAC不一致(所以这个问题Windows系统才会出现) 解决 需要安装Vue - Official…

掌握高等数学、线性代数、概率论所需数学知识及标题建议

在数学的广袤领域中,高等数学、线性代数和概率论作为三大核心分支,不仅在理论研究中占据重要地位,更在实际应用中发挥着举足轻重的作用。为了深入理解和掌握这三门学科,我们需要掌握一系列扎实的数学知识。 高等数学所需数学知识 …

vitepress搭建的博客系统cdn引入github discussions评论系统

github仓库必须是公开的。 按照CDN的方式引入 打开discussions模块 安装giscus app 配置giscus 就是刚安装了giscus app的仓库 页面往下走,生成了代码: 配置vitepress 采用了CDN的方式引入 使用web component 随便找个地方试试组件 效果 有了…

Web3失败下互联网的未来转型之路

互联网的消亡已不再是夸大其词的说法。在大型科技巨头和生成式AI的推动下,网络的死亡螺旋正在加速,就像希腊神话中的蛇怪,象征着自我吞噬与永生。互联网已经开始自我喂养,并吐出最糟糕的部分供我们消费。 没有价值 Web3未能提供…