Vue 实用插件

VueUse

• 提高开发效率： Vueuse 提供了丰富的可重用组件和函数，可以帮助开发者节省大量的开发时间和精力，避免重复编写常见的功能代码。
• 提升应用质量： Vueuse 的模块经过广泛的测试和社区验证，具有良好的稳定性和可靠性，可以提升应用程序的质量和性能。
• 轻量级和模块化： Vueuse 由一系列独立的模块组成，每个模块都提供一个特定的功能或功能集，开发者可以根据需要选择和使用。
• 可重用的Vue组件和函数： Vueuse 提供了许多可重用的 Vue 组件和函数，涵盖了各种常见的开发需求，如表单处理、状态管理、DOM 操作等。
• 对TypeScript支持： Vueuse 对 TypeScript 提供了良好的支持，所有的组件和函数都有完整的类型定义，提供了更好的代码提示和类型安全性。
• 社区驱动和活跃： Vueuse 是一个由社区驱动的项目，拥有活跃的开发者社区，不断更新和增加新的功能，同时也接受社区的贡献和反馈。

插件地址： VueUse

仓库地址： GitHub - vueuse/vueuse

vue-toastification

Vue Toastification 是一个轻量、易用且美观的提示条通知组件，提供了大量的选项来支持大部分自定义选择。

• 内置的 Nuxt 支持
• 支持新的Composition API和Vue 3
• 通用注册允许它在任何应用程序中使用，甚至在 React 中。
• 完全使用Typescript开发
• RTL 支持很容易
• 简单易用
• 自定义所有
• 滑动关闭 👌
• 可以使用自定义组件或 jsx 作为提示条内容
• 可以通过onClose、onClick、 onMounted 钩子自定义创建你想要的
• 自定义提示条过滤和带有生命周期钩子的队列
• 支持以编程方式移除提示条
• 支持以编程方式更新提示条
• 支持定义提示条行为
• 当窗口失去焦点时，支持暂停提示条
• 花式进度栏显示剩余时间
• 轻松使用自定义的主题和动画

插件地址： GitHub - Maronato

演示地址： maronato.dev

vue-i18n-next

（Vue3的国际化插件）i18n 是市面上比较成熟的国际化库，而 vue-i18n 是一个 Vue.js 国际化的插件，就是在vue应用中嵌入语言切换功能,可以切换已导入到项目中的各个语系。

vue-i18n-nex是Vue i18n 用于Vue 3的插件库。

官方地址： Vue I18n

仓库地址： GitHub - intlify/vue-i18n: Vue I18n for Vue 3

vue-cropper

简单的vue图片裁剪插件

项目地址： GitHub - xyxiao001/vue-cropper

演示地址： test vue-cropper

Vue Grid Layout

Vue Grid Layout是一个类似于Gridster的栅格布局系统，适用于Vue.js，灵感来源于React Grid Layout。

• 可拖拽
• 可调整大小
• 静态部件（不可拖拽、调整大小）
• 拖拽和调整大小时进行边界检查
• 增减部件时避免重建栅格
• 可序列化和还原的布局
• 自动化 RTL 支持
• 响应式

中文官网： Vue Grid Layout -️ 适用Vue.js的栅格布局系统

仓库地址： GitHub - jbaysolutions/vue-grid-layout

Vue Qrcode Reader

Vue QRcode Reader 是一组用于检测和解码QR(二维码)码的Vue.js组件。它使你无需离开浏览器即可检测和解码QR码，所有组件都具有响应能力。除此之外，它接近零样式，因此你可以使它们适合你的布局。使用方法简单明了。

官网地址： Vue Qrcode Reader

仓库地址： GitHub - gruhn/vue-qrcode-reader

vue-clipboard3

使用 clipboard.js 在 Vue 3 （composition-api） 中轻松复制到剪贴板。

仓库地址： GitHub - JamieCurnow/vue-clipboard3

vue.draggable

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

• 支持触摸设备
• 支持拖拽和选择文本
• 支持智能滚动
• 支持不同列表之间的拖拽
• 不以jQuery为基础
• 和视图模型同步刷新
• 和vue2的过渡动画兼容
• 支持撤销操作
• 当需要完全控制时，可以抛出所有变化
• 可以和现有的UI组件兼容

官方地址： vuedraggable

仓库地址： GitHub - SortableJS/Vue.Draggable

Screenfull.js

vue3 使用screenfull插件全屏显示页面、全屏显示元素DOM节点。

需求背景：移动端打开网站，发现不能充分利用屏幕空间，浏览器自带的全屏功能很难找，用户体验较差。并且有些元素比如图片需要去放大看，这时如果点击就能全屏，再点击就退出，用户体验可以提升。

官方地址： screenfull demo

仓库地址： GitHub - sindresorhus/screenfull

Nprogress.js

Nprogress.js-进度条组件

仓库地址： GitHub - rstacruz/nprogress

预览地址： NProgress