>首页> IT >

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

时间:2022-10-19 17:48:33       来源: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:指令包装器

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/

2)@vueuse/motion

Vue Composables 让你的组件动起来

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

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

7、音视频组件

@vueuse/sound

用于播放音效的 Vue 组合

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

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

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

关键词: 视频教程 产品设计