vue3实用工具分享

最新推荐文章于 2024-05-21 20:16:35 发布
最新推荐文章于 2024-05-21 20:16:35 发布
阅读量471 收藏
点赞数 2
文章标签： ui javascript 前端 echarts Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44961720/article/details/129480554
版权

Vue3

UI库/相关工具/可视化/生态全分享

1.Web UI库

1. ElementUI Plus

一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库

https://element-plus.org/zh-CN/

2. Ant Design of Vue

Ant Design 的 Vue 实现，开发和服务于企业级后台产品

https://www.antdv.com/docs/vue/introduce-cn

3. BalmUI

基于谷歌的 Material Design，附带 Vue 插件和指令，以及从简单到复杂的高度可定制组件

https://next-material.balmjs.com/

4. Naive UI

图森Vue3的组件库，文档完整，我项目中经常使用

https://www.naiveui.com/zh-CN/os-theme

5. arco.design

字节跳动企业级产品设计系统，支持React和Vue双版本

https://arco.design/

6, Quasar

轻松构建高性能和高质量的Vue.js 3用户界面，好用，但没有中文文档

https://quasar.dev/

7. iDUX

Vue3.x 的 UI 组件库，完全使用 TypeScript 开发

https://idux.site/

8. TDesign

腾讯业务团队在服务业务过程中沉淀的一套企业级设计体系

https://tdesign.tencent.com/

https://tdesign.tencent.com/vue-next/overview

9. PrimeVue

易于使用、多功能、高性能的 Vue UI 组件库

https://www.primefaces.org/primevue/

10. DevUI

华为基于 Vue3 和 DevUI 设计的 UI 组件

https://vue-devui.github.io/

11. vuestic-ui

Vue 3 的免费和开源 UI 库 ,UI非常好看，并且有可用后台管理界面。

https://vuestic.dev/

12. Headless UI

完全无样式、完全可访问的 UI 组件，旨在与 Tailwind CSS 完美集成。

https://headlessui.com/

13. View UI Plus

基于 Vue.js 3 的企业级 UI 组件库和前端解决方案

https://www.iviewui.com/

2.移动UI库

14. Vant

有赞轻量、可靠的移动端组件库

https://vant-contrib.gitee.io/vant/#/zh-CN

15. NutUI

京东风格的轻量级移动端 Vue 组件库，非常适合移动端电商使用。

https://nutui.jd.com/#/

16. Varlet

Material 风格移动端组件库 ，文档非常齐全。

https://varlet.gitee.io/varlet-ui/#/zh-CN/home

17. nutui-bingo

京东基于 NutUI 的抽奖组件库，助力营销活动和小游戏场景。

https://nutui.jd.com/bingo/#/

3.相关工具

18. unplugin-vue-components

antfu 按需组件自动导入，开箱即用地支持 Vue 2 和 Vue 3，Tree-shakable，只注册你使用的组件，附有流行UI 库的内置解析器。

https://www.npmjs.com/package/unplugin-vue-components

19. vuex-persistedstate

在页面重新加载之间保持并重载您的 Vuex 状态

https://github.com/robinvdvleuten/vuex-persistedstate

20. vuex-persist

支持 Typescript 的Vuex插件，它能够将应用程序的状态保存到持久存储中，例如 Cookies 或 localStorage

https://championswimmer.in/vuex-persist/

21. @vueuse/gesture

手势库，使应用程序具有交互性

https://gesture.vueuse.org/

22. unplugin-auto-import

antfu 自动导入 Vite、Webpack、Rollup 和 esbuild 的 API。支持 TypeScript。

https://github.com/antfu/unplugin-auto-import

23. pinia-plugin-persistedstate

Pinia 商店的可配置持久性

https://github.com/prazdevs/pinia-plugin-persistedstate

24. https://vue-termui.dev/

一个基于 Vue.js 的终端 UI 框架，可让您轻松构建现代终端应用程序

https://vue-termui.dev/

4.可视化

25. Pdfvuer

DF 查看器，使用 Mozilla 的 PDF.js，支持 Vue2 和 Vue3

https://arkokoley.github.io/pdfvuer/

26. vue3-marquee

无缝滚动组件

https://vue3-marquee.vercel.app/

27. Vue-ECharts

百度ECharts 的 Vue.js 组件。 配置参考Echarts官方 基于 ECharts v5+ 开发，适用于Vue.js 2/3。

https://vue-echarts.dev/

28. iconpark

字节跳动出品，将一个SVG图标转化为多个主题，并生成React图标，Vue图标，svg图标

https://iconpark.oceanengine.com/home

5.插件

29. vue-multiselect-next

Vue.js 的通用选择/多选/标记组件

https://vue-multiselect.js.org/

30. vue-print-nb

用于印刷、简单、快速、方便、轻便的指令包装器

https://github.com/Power-kxLee/vue-print-nb

31. vue-i18n-next

Vue3的国际化插件

https://vue-i18n.intlify.dev/

32. vue-cropper

简单的vue图片裁剪插件

http://github.xyxiao.cn/vue-cropper/example/

33. Vue Grid Layout

Vue.js 的网格布局系统

https://jbaysolutions.github.io/

34. Vue Qrcode Reader

允许在不离开浏览器的情况下检测和解码二维码

https://gruhn.github.io/vue-qrcode-reader/

35. Makeit Captcha

基于 Vue3 + Vite + Canvas 开发的滑块验证码，动态生成验证滑块，结合后端的二次校验，能有效的避免被抓取模拟验证https://admin.makeit.vip/components/captcha

36. vue3-clipboard

Vue 3 的 clipboard.js

https://github.com/soerenmartius/vue3-clipboard

37. vue.draggable

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

https://sortablejs.github.io/vue.draggable.next/#/simple

38. BetterScroll

解决移动端（已支持 PC）各种滚动场景需求的插件。

https://better-scroll.github.io/docs/zh-CN/

6.相关生态

39. Vue 插件库

https://www.vue365.cn/

40. Pinia

轻量级状态管理库，API 设计更接近Vuex 5的提案

https://pinia.vuejs.org/

41. Nuxt Modules

Nuxt 发现我们的模块列表以增强您的Nuxt 项目

https://modules.nuxtjs.org/

42. Nuxt 3

轻量级应用框架,可用来创建服务端渲染 (SSR) 应用

https://v3.nuxtjs.org/

43. vuepress

Vue 驱动的静态网站生成器

https://v2.vuepress.vuejs.org/zh/

44. VueUse

强大的 Vue 组合实用程序集合

https://vueuse.org/

7.动画

45. vue-starport

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

https://vue-starport.netlify.app/

46. @vueuse/motion

Vue Composables 让你的组件动起来

https://motion.vueuse.org/

8.音视频

47. @vueuse/sound

用于播放音效的 Vue 组合

https://sound.vueuse.org/

常肉肉
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue技术栈实用知识库分享知识分享
10-13
这个知识库分享了一系列关于Vue 3的深度教程，包括从基础到高级的完整指南，以及如何利用Vue 3来创建可扩展的项目管理系统后台。这些教程旨在帮助开发者深入理解和熟练运用Vue 3的各个方面。 1. **Vue 3 路由进阶**...
Vue cli 引入第三方JS和CSS的常用方法分享
10-18
在现代前端开发中，Vue CLI 是一款非常流行的脚手架工具，它可以帮助开发者快速搭建 Vue.js 项目。在实际开发过程中，我们常常需要引入第三方的 JavaScript 和 CSS 库来扩展功能或美化界面。本文将详细介绍两种在 ...
探索VueUse Motion：下一代Vue.js动画框架
gitblog_00048的博客
03-24 649
探索VueUse Motion：下一代Vue.js动画框架 项目地址:https://gitcode.com/vueuse/motion VueUse Motion 是一个由VueUse团队打造的现代化、高性能的Vue.js动画库，它为Vue 3提供了一种优雅的方式来处理组件的状态变化和动效。这个项目的目的是让开发者能够更容易地创建流畅、动态且响应式的UI交互。 技术概览 VueUse Motio...
vue3移动端调用手机摄像头实现扫描二维码功能
qq_37656005的博客
01-19 1657
vue3+vant4 实现移动端网页调用手机摄像头实现扫描二维码，并返回二维码附带信息功能
探索未来滚动体验：Vue3-Marquee
gitblog_00002的博客
05-08 453
探索未来滚动体验：Vue3-Marquee 项目简介 项目地址:https://gitcode.com/megasanjay/vue3-marquee Vue3-Marquee 是一个专为Vue 3设计的轻量级走马灯组件，无需依赖任何其他库。它源于内部项目的需求，现在已被精心打磨并开源，以帮助开发者们创造出更流畅、更具吸引力的滚动效果。受React组件React Fast Marquee启发，Vu...
vue-qrcode-reader 实现直接扫码和相册扫码
weixin_47013797的博客
04-19 1639
但是vue-qrcode-reader只可以支持二维码扫描，对于条形码没有反应，应该是不支持，从实际扫描效果来看确实如此。此方法可以在PC端调试，但是需要设置https:true （vue.config.js中）
vueuse（函数库）的基本使用，宝藏神器，务必收藏
weixin_52153452的博客
07-20 1706
vueuse（函数库）的基本使用，宝藏神器，务必收藏
Vue跑马灯特效组件（vue-marquee-text-component）的使用
YingUser的博客
05-01 4031
vue-marquee-text-component是一款vue.js跑马灯特效组件，利用CSS GPU动画为文本创建传统的跑马灯效果 使用方法: 1、在main.js 或者 similar文件中 导入组件 import Vue from 'vue' import MarqueeText from 'vue-marquee-text-component' Vue.component('marquee-text', MarqueeText) 或者 ：可以这样做来注册组件： import Mar
分享vue面试题2020.docx
10-26
12. **单元测试**：Vue Test Utils和Jest或Mocha等工具可以帮助编写和运行Vue组件的单元测试。 13. **Vuex的模块化**：对于大型项目，Vuex可以被划分为多个模块，每个模块拥有自己的state、mutations、actions和...
Vue前端项目部署IIS的实现
10-15
在现代Web开发中，Vue.js是一个非常流行的...这种方法简单且实用，尤其适用于向潜在客户展示产品原型或内部团队分享项目。希望这个教程对你在部署Vue项目到IIS的过程中有所帮助，记得持续学习和探索更多Web开发技巧。
详解Vue源码中一些util函数
12-10
最进尝试阅读vue源码，看到很多有意思的函数，在这里分享一下。 Object.prototype.toString.call(arg) 和 String(arg) 的区别？ 上述两个表达式都是尝试将一个参数转化为字符串，但是还是有区别的。 String(arg) 会...
idux：V Vue3.x的UI组件库
02-21
@Idux 一套企业级中后台UI组件库，基于vue 3.x开发。全部代码开源并遵循MIT协议，任何企业，组织及个人相似免费使用。 :sparkles:特性 Monorepo管理模式： cdk ， components ， pro 全面拥抱Composition Api，从原始物到文档 完全使用TypeScript开发，提供完整的类型定义 开箱即用的 高覆盖率的单元测试 国际化语言支持 灵活的全局配置 深入细节的主题定制能力 :desktop_computer:支持环境 Vue ^3.0.0 :package:安装 :hammer:使用 :link:链接 :keyboard:开发 npm install npm run start 浏览器会自动打开。 :handshake:如何贡献 在任何形式的参与前，请先阅读。如果你希望参与贡献，欢迎，或给我们 。 强烈推荐阅读质疑 ， 和 ， ，更好的问题更容易获得帮助。 :sparkling_heart:特别感谢 :sun:授权协议
Vue实现手机扫描二维码预览页面效果
10-15
主要为大家详细介绍了Vue实现手机扫描二维码预览页面效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue3中的文字滚动播报
黄钢的博客
03-14 997
之前UI框架一直使用的elementPlus，有个需求，需要在页面上写个滚动播放新闻的功能，发现UI框架居然没有这个组件。花了一下午，在ChatGPT的帮助下，总算写成功了，先看最终展示效果web页面滚动播放文字视频被压缩的稀烂了，GIF又没法上传，截个图看看吧直接上代码：
今日分享【Vue3基础知识】
fengGer的博客
05-16 360
并且你会发现，它是**强制开启深度监视（deep:true），并且无法关闭。然而现在我们监视的是reactive定义的响应式数据的全部属性，是只监听其中的一个属性，那怎么办呢，可能大家会。
vue插件合集
Winsom1的博客
11-17 683
UI库/相关工具/可视化/生态全分享
2023 年 Vue 最流行的动画库
Willin Wang 的全栈升级指南
09-11 1420
Vue.js 因其简单性和灵活性而广受欢迎。Vue.js 以其创建流畅且引人入胜的动画视觉效果的能力而闻名。除了 Vue.js 内置的动画功能外，Vue 动画库还允许您创建自定义动画。为什么我们需要 Vue 动画库？它是一个专门为 Vue.js 应用程序设计的动画组件库。使用此库，您的 Vue.js 应用程序可以轻松展示引人注目的动画，而无需编写复杂的 CSS 或 JavaScript 代码。借助 Vue 的动画库，可以创建各种令人惊叹的效果，包括淡入、幻灯片、弹跳等。
基于 vuestic-ui 实战教程 - 获取动态数据篇
最新发布
PleaseBeStrong的博客
05-21 581
原始的quick start版本并没有用到axios所以应该是没有安装，保险起见我们就先安装个。
vue3.0借用vue-pdf-embed实现在线预览pdf文件
热门推荐
hyduan_h5的博客
05-09 1万+
在需求中，经常遇见pdf的在线预览效果 很多pdf插件不支持vue3，或者是没有集成翻页放大缩小功能，比如vue-pdf。 实现原理：借用依赖vue-pdf-embed(pdf预览),pdfjs-dist（获取pdf总页数） 实现效果 实现步骤 一：安装依赖 npm i vue-pdf-embed -S npm install --save pdfjs-dist 二：页面使用 vue文件中 <template> <div> <div class="div"&.
制作vue调试工具的时候报错
07-12
### 回答1： 当制作Vue调试工具时遇到报错时，首先我们需要确定报错的具体信息。一般情况下，报错信息会提示错误的位置和原因。 第一步是检查报错信息，并定位到出现错误的位置。这可能是某个特定的代码段、文件或组件。 第二步是仔细阅读报错信息，并理解其中的错误原因。报错信息通常会提供一些线索，如未定义的变量、未安装的依赖项或语法错误等。 第三步是根据报错信息，检查相关代码。对于报错位置附近的代码，可以检查变量名拼写是否正确，语法是否符合规范，依赖项是否正确导入等。 第四步是尝试使用调试工具提供的功能来定位问题。Vue调试工具通常具有调试功能，可以显示组件的状态、属性和方法，从而帮助我们更好地理解代码的执行过程。 如果以上步骤都无法解决问题，可以尝试以下方法： 1. 搜索报错信息：将报错信息复制到搜索引擎中，可能会找到类似问题的解决方法或其他开发者的经验分享。 2. 检查代码库或文档：查看Vue的官方文档、GitHub仓库或其他资源，看是否有相关问题的解决方案或讨论。 3. 寻求帮助：在Vue的社区论坛、开发者社区或GitHub仓库中提问，向其他开发者寻求帮助。提问时，尽量提供详细的报错信息和代码，以便其他人更好地理解问题并给出解答。 总之，当制作Vue调试工具时遇到报错，我们可以通过阅读报错信息、检查相关代码、使用调试工具和寻求帮助等方法来定位和解决问题。每个报错可能具有不同的原因和解决方法，因此需要耐心和细心地进行排查和分析。 ### 回答2： 在制作Vue调试工具的过程中，如果遇到错误报错，我们可以采取以下步骤来解决问题。 首先，我们需要仔细阅读错误信息，以了解报错的原因。错误信息通常会指出出错的文件、具体的行数和错误类型等关键信息，有助于我们快速定位问题。 其次，我们可以通过排查代码来确认错误的来源。可以逐行检查代码，特别关注和报错相关的区域。我们可以确认是否有语法错误、变量命名错误、引用错误等。 如果我们无法找到错误的原因，可以考虑使用调试工具来帮助我们查找问题。Vue开发工具提供了丰富的调试功能，例如Vue Devtools。可以使用该工具来检查组件的状态、观察属性和事件的变化等。通过查看实时更新的信息，我们可以更好地理解代码的执行过程，并进一步定位以及解决问题。 如果问题依然存在，我们可以查看Vue文档和社区中是否有关于类似问题的解决方案。Vue的文档中提供了详细的API和示例，社区中也有许多开发者分享了他们在开发过程中遇到的问题及解决方案。借鉴他人的经验和解决方案，可以帮助我们更快地解决问题。 最后，如果以上方法都无法解决问题，我们可以通过向Vue的官方社区或相关论坛提问，寻求其他开发者的帮助。在提问时，我们应该提供详细的错误信息、相关代码和尝试过的解决方案，以便其他人更好地理解我们的问题并给出有效的建议。 总之，当制作Vue调试工具时遇到报错时，我们需要耐心地排查代码、利用调试工具、查阅文档和社区资源来解决问题，以确保调试工具能正常运行。 ### 回答3： 制作 Vue 调试工具时遇到报错是一种常见情况。在处理这个问题之前，首先需要了解报错的具体信息，以便更好地解决它。 首先，我们可以查看控制台输出，以获取更多关于报错的信息。控制台通常会提供有关报错的详细信息和报错行号，这有助于我们定位问题。可以根据报错信息，检查相关代码的语法错误、命名问题或其他潜在错误。 其次，我们可以使用调试工具或浏览器提供的开发者工具进行调试。通过设置断点，可以逐行执行代码，并观察数据的变化，以便找到引起报错的具体操作或逻辑错误。同时，我们可以使用浏览器提供的调试功能，例如查看变量的值、执行特定的代码片段等，以更好地理解和解决问题。 此外，我们可以查阅 Vue 框架的官方文档或社区论坛，寻找与报错相似的问题和解决方案。这些资源通常提供了大量的实用示例和指导，可以帮助我们解决类似的问题。 在解决报错的过程中，还要注意代码的组织和结构是否合理，是否遵循了 Vue 的语法规范。Vue 对于代码的书写格式和组织方式有一定的要求，如果不符合这些要求，很有可能引起报错。 总之，在制作 Vue 调试工具时遇到报错是正常现象，我们需要仔细分析报错信息，使用调试工具进行排查，并参考相关文档和资源解决问题。这样我们就能更好地解决报错，顺利完成 Vue 调试工具的制作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值