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

说到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?:❯ yarnnpmpnpmbunnone

使用脚手架搭建完成后,通过运行以下命令启动 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.mzph.cn/pingmian/28364.shtml

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

相关文章

浏览器上直接运行近 1000个 AI 模型!

今天推荐的开源项目叫做 tansformers.js,这是一个不需要服务器端,能让你在浏览器上使用到自然语言处理、计算机视觉等 AI 能力的开源项目。由 xenova 开源,transformers.js 已经在 GitHub 上获得了超过 9.2K 颗星星。 项目简介 transformers.…

JVM如何确定方法调用

方法调用并不等同于方法执行,方法调用阶段唯一的任务就是确定调用哪一个方法,不涉及方法内部的具体运行过程。在程序运行时,进行方法调用是最普遍、最频繁的操作,但Class文件的编译过程中不包含传统编译中的连接步骤,一…

医学人工智能项目如何申请基金?

小罗碎碎念 本期推文面向的群体 青年教师有志硕博/博后 尤其适合一直认真追小罗推文的老师/同学,你们会发现自己在看这篇推文的时候,遇到自己领域的项目时,文思如泉涌,仿佛马上就能把本子写好,哈哈。(运用…

命令词:引导行动的语言工具

人不走空 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌赋:斯是陋室,惟吾德馨 目录 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌…

App UI 风格打造独特体验

App UI 风格打造独特体验

通过Stream流对集合进行操作

Stream Api是JDK8提供的新特性,可以更为方便地对集合进行操作,比如我今天遇到的一个场景: 将本地的一个视频文件分成多块上传到Minio服务器,现在上传功能已经完成,需要调用minioClient对已经上传的文件重新合并成一个新…

8086汇编 add指令学习

ADD,是Intel x86平台的汇编加法指令,MEM代指操作数为内存或寄存器,REG代指操作数为寄存器,IMM代指立即数,SEG代指操作数为段寄存器。 形式和示例如下; ADD MEM8,REG8 ADD DS:[BXSI],AL ADD MEM16,R…

【ARM Coresight Debug 系列 -- ARMv8/v9 Watchpoint 软件实现地址监控详细介绍】

请阅读【嵌入式开发学习必备专栏 】 文章目录 ARMv8/v9 Watchpoint exceptionsWatchpoint 配置信息读取Execution conditionsWatchpoint data address comparisonsSize of the data accessWatchpoint 软件配置流程Watchpoint Type 使用介绍WT, Bit [20]: Watchpoint TypeLBN, B…

vue技巧(十)全局配置使用(打包后可修改配置文件)

1、背景 vue打包目前主流用的有webpack和vite两种,默认用的webpack。(二者的区别大家可以各自上网查,我没用过vite,所以不过多介绍)vue通过webpack打包后,源码会被压缩,但一些关键配置可…

【新课程】PICO VR 交互开发指南

从PICO开始,迈向XR跨平台开发 Unity XR Interaction Toolkit (简称XRI)是一套跨平台的 XR 交互开发工具包,随着版本的更新与完善,逐渐获得了开发者的青睐。各 XR 平台逐步推荐开发者采用 XRI 作为首选的交互开发工具为…

Pytest框架中fixture功能详解

文章目录 1 定义 Fixture函数 2 Fixture 的函数参数 2.1 传入其他fixture函数作为参数 2.2 传入request对象参数 示例1:访问fixture的调用者 示例2:使用fixture的参数 3 Fixture 的作用域参数scope 3.1 scopeclass场景 3.2 scopesession场景 4…

SwiftUI 6.0(iOS 18)新容器视图修改器漫谈

概览 本届 WWDC 2024 观影正如火如荼的进行中,一片鸟语花香、枝繁叶茂的苹果树上不时结出几颗令人垂涎欲滴的美味苹果让秃头码农们欲罢不能。 如您所愿,在界面布局“利器” SwiftUI 这根蔓藤也长出不少喜人的果实,其中在 iOS 18.0 中新添加的…

rabbitMQ的简单使用

rabbitMQ的介绍 RabbitMQ是一个开源的消息代理和队列服务器,主要用于在不同的应用程序之间传递消息。它基于AMQP(Advanced Message Queuing Protocol)协议,提供了一种可靠的方式来处理异步通信。RabbitMQ使用Erlang语言编写&…

springboot 整合redis问题,缓存击穿,穿透,雪崩,分布式锁

boot整合redis 压力测试出现失败 解决方案 排除lettuce 使用jedis <!-- 引入redis --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId><exclusions><exclus…

内存泄漏 内存溢出

概念 内存泄漏&#xff1a;是程序没有正确的释放已分配的内存&#xff0c;造成系统内存的浪费。内存泄漏很难发现&#xff0c;因为他不会直接导致程序崩溃&#xff0c;而是会慢慢降低程序的性能。 内存溢出&#xff1a;系统中存在无法回收的内存或使用的内存过多&#xff0c;…

【linux-imx6ull-定时器与中断】

目录 1. 前言2. Linux软件定时器2.1 内核频率选择2.2 重要的API函数2.3 Linux软件定时器的使用配置流程 4. Linux中断4.1 简单中断使用4.1.1 简要说明4.1.2 重要的API函数4.1.3 中断的简要配置流程 4.2. 中断的上半部和下半部4.2.1 tasklet实现下半部4.2.2 work实现下半部 1. 前…

MySQL数据操作与查询- 聚合函数和分组查询

一、聚合函数 聚合函数主要用来进行数据 汇总 。 1、sum 返回选取的某列的总和。 语法&#xff1a; select sum(字段名) from 表名 where 条件表达式 2、max 返回选取的某列的最大值。 语法&#xff1a; select max(字段名) from 表名 where 条件表达式 3、min 返…

【网络安全的神秘世界】AppScan安装及使用指南

&#x1f31d;博客主页&#xff1a;泥菩萨 &#x1f496;专栏&#xff1a;Linux探索之旅 | 网络安全的神秘世界 | 专接本 https://www.hcl-software.com/appscan AppScan是一种综合型漏洞扫描工具&#xff0c;采用SaaS解决方案&#xff0c;它将所以测试功能整合到一个服务中&a…

样式的双向绑定的2种方式,实现样式交互效果

与样式标签实现双向绑定 通过布尔值来决定样式是出现还是消失 show代表着布尔值&#xff0c;show的初始值是false所以文本不会有高亮的效果&#xff0c;当用户点击了按钮&#xff0c;就会调用shows这个函数&#xff0c;并将show的相反值true赋值并覆盖给show,此时show的值为tru…

【秋招突围】2024届秋招笔试-小红书笔试题-第二套-三语言题解(Java/Cpp/Python)

&#x1f36d; 大家好这里是清隆学长 &#xff0c;一枚热爱算法的程序员 ✨ 本系计划跟新各公司春秋招的笔试题 &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f497; &#x1f4e7; 清隆这边…