0

0

【吐血整理】40+ Vue3 实用工具分享

青灯夜游

青灯夜游

发布时间:2022-10-19 17:52:58

|

3937人浏览过

|

来源于php中文网

原创

vue3正式发布已经快2年了,今年2月也正式变成 vue 项目的默认版本。下面本篇文章就整理总结了40个vue3 实用工具、ui库、插件、生态分享给大家,希望对大家有所帮助。

1、Vue3 UI组件库

UI组件库是可以理解为是一个重复使用的界面设计元素的集合体 ,它是一个文件库。 UI组件库在整个系统中扮演的是行为层面的对接,是团队内部设计师和开发间的横向协作,是保证产品输出一致的规范基础。(学习视频分享:vue视频教程

这里整理了17个Vue3 UI组件库,包含13个Web UI库和4个移动 UI库,阅读文章《17个Vue3实用UI组件库(Web+移动)分享》即可获取。

Web UI库

立即学习前端免费学习笔记(深入)”;

  • ElementUI Plus:面向设计师和开发者的组件库

  • Ant Design of Vue:Ant Design 的 Vue 实现,开发和服务于企业级后台产品

  • BalmUI:基于谷歌的 Material Design设计的UI 组件库

  • Naive UI:基于 Vue 3.0/TypeScript 的免费开源前端 UI 组件库

  • arco.design:字节跳动企业级产品设计系统,支持React和Vue双版本

  • Quasar:一个完整的、以性能为中心的框架

  • 。。。

移动UI库

  • Vant:移动端组件库

  • NutUI:京东风格的轻量级移动端 Vue 组件库

  • Varlet:Material 风格移动端组件库

  • nutui-bingo:京东基于 NutUI 的抽奖组件库

2、Vue3实用开发工具

在之前的文章《7款值得收藏的Vue3实用开发工具(分享)》中,我们介绍了7个Vue3实用开发工具:

  • unplugin-vue-components:按需组件自动导入插件

  • vuex-persistedstate:Vuex持久化插件

  • vuex-persist:支持 Typescript 的Vuex持久化插件

  • @vueuse/gesture:手势库,使应用程序具有交互性

  • unplugin-auto-import

  • pinia-plugin-persistedstate:Pinia 数据持久化储存

  • vue-termui.dev:一个基于 Vue.js 的终端 UI 框架

3、Vue3可视化工具

在科技的频频更新下,可视化开发工具成为了提升开发效率的有效工具。在之前的文章《【整理总结】4个Vue3可视化工具》中,我们介绍了4个Vue3可视化工具:

  • Pdfvuer:用于Vue应用中的一个PDF查看器

  • vue3-marquee:无缝滚动组件

  • Vue-ECharts:百度ECharts 的 Vue.js 组件

  • iconpark:一个通过技术驱动矢量图标样式的开源图标库

4、Vue3常用插件

在之前的文章《10个提高开发效率的Vue3常用插件(快来收藏)》中,我们了解了10个有助于提高效率的vue插件:

  • vue-multiselect-next:Vue的通用选择/多选/标记组件

  • vue-print-nb:指令包装器

    Amazon Nova
    Amazon Nova

    亚马逊云科技(AWS)推出的一系列生成式AI基础模型

    下载
  • vue-i18n-next:Vue3的国际化插件

  • vue-cropper:vue图片裁剪插件

  • Vue Grid Layout:Vue的网格布局系统

  • Vue Qrcode Reader:一组用于检测和解码QR(二维码)码的Vue.js组件

  • Makeit Captcha:滑块验证码插件

  • vue3-clipboard:基于Vue3的粘贴复制插件

  • vue.draggable 基于Sortable.js的Vue 3拖放组件

  • BetterScroll解决移动端(已支持 PC)各种滚动场景需求的插件

5、Vue3相关生态

在之前的文章《6个实用的Vue3相关生态(总结分享)》中,我们了解了6个Vue3相关生态:

  • Vue插件库(vue365.cn)

  • Pinia:轻量级状态管理库

  • Nuxt Modules

  • Nuxt 3:可用来创建服务端渲染 (SSR) 应用

  • vuepress:Vue驱动的静态网站生成器

  • VueUse:基本 Vue 组合实用函数的集合

6、Vue3动画插件

1)vue-starport

带有动画的跨路由共享组件

github地址:https://github.com/antfu/vue-starport/blob/main/README.zh-Hans.md

演示地址:https://vue-starport.netlify.app/

1.jpg

2)@vueuse/motion

Vue Composables 让你的组件动起来

官方地址:https://motion.vueuse.org/

github地址:https://github.com/vueuse/motion

2.png

7、音视频组件

@vueuse/sound

用于播放音效的 Vue 组合

官方地址:https://sound.vueuse.org/

github地址:https://github.com/VueUse/sound

3.png

【相关视频教程推荐:vuejs入门教程web前端入门

相关专题

更多
ECharts是什么
ECharts是什么

ECharts是基于JavaScript的开源可视化库,能够帮助开发者轻松地实现各种复杂的数据可视化效果,提供了丰富的图表类型和交互功能。本专题为大家提供ECharts是什么的相关的文章、下载、课程内容,供大家免费下载体验。

269

2023.08.04

echarts自适应大小设置
echarts自适应大小设置

使用ECharts的自适应大小设置可以使图表能够根据不同屏幕尺寸和设备进行自适应。一种是使用resize事件,在图表容器大小改变时重新渲染图表;另一种是使用CSS样式,通过设置图表容器的宽度和高度为百分比值,使图表容器根据父元素的大小进行自适应。根据实际需求选择合适的方法,可以使图表在不同设备上都能够良好地显示和交互 。

450

2023.09.13

vue.js为什么报错
vue.js为什么报错

vue.js报错的原因:1、语法错误;2、组件使用不当;3、数据绑定问题;4、生命周期钩子使用不当;5、插件或依赖问题;6、路由配置错误;7、异步操作处理不当等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

117

2024.03.11

vue.js插槽有哪些用
vue.js插槽有哪些用

vue.js插槽的作用:1、提高组件的可重用性;2、实现组件的灵活布局;3、实现组件间的数据传递和交互;4、促进组件的解耦和模块化。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

156

2024.03.11

vue.js怎么带参数跳转
vue.js怎么带参数跳转

vue.js带参数跳转的方法:1、定义路由;2、在组件中使用路由参数;3、进行带参数的跳转。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

88

2024.03.11

python中print函数的用法
python中print函数的用法

python中print函数的语法是“print(value1, value2, ..., sep=' ', end=' ', file=sys.stdout, flush=False)”。本专题为大家提供print相关的文章、下载、课程内容,供大家免费下载体验。

181

2023.09.27

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

505

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

240

2023.07.28

ip地址修改教程大全
ip地址修改教程大全

本专题整合了ip地址修改教程大全,阅读下面的文章自行寻找合适的解决教程。

27

2025.12.26

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 1.3万人学习

Vue3.x 核心篇--十天技能课堂
Vue3.x 核心篇--十天技能课堂

共30课时 | 1.4万人学习

Vue3.x新特性篇--十天基础课堂
Vue3.x新特性篇--十天基础课堂

共20课时 | 1.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号