vue插件

原创 已于 2023-11-09 16:06:10 修改 · 196 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

于 2022-10-31 11:19:57 首次发布
本文汇总了Vue项目中常用的各类插件，包括富文本编辑器、json展示与编辑插件、动画效果插件、打印插件、二维码生成插件等，还涉及到加密解密、时间格式化、新手指引、通信模块等功能的插件，为Vue开发提供便利。
  1. vue-froala-wysiwyg（富文本编辑器）
  2. vue-quill-editor （富文本编辑器）
  3. vue-json-tree-view （插件 json 展示）插件 json 展示
  4. vue-animate-onscroll （滚动到当前模块执行动画效果）
  5. vue-print-nb （打印）
  6. animate.css （动画效果）
  7. vue-json-editor （json编辑器）
  8. vue-clipboard2 （前端能够调用 剪切板 的一个插件）
  9. vue-cron （基于Vue的Cron表达式组件）
  10. vue-qr （生成二维码）
  11. vuedraggable （拖拽插件）
  12. qs （将json格式转化为 key=value 的格式）
  13. nprogress （滚动条）
  14. font-awesome （图标库）
  15. crypto-js （加密解密方法）
  16. clipboard.js （一款轻量级的实现复制文本到剪贴板功能的JavaScript插件）
  17. classlist-polyfill，babel-polyfill （相当于一段代码，它先检查这个浏览器是否支持某个API，如果不支持就加载对应的polyfill （兼容））
  18. benz-amr-recorder （实现播放amr格式音频 AMR 录音机）
  19. vue-video-player (视频播放插件)
  20. avue-plugin-map （avue 地图插件）
  21. moment (时间格式化插件)
  22. driver.js (新手指引插件)
  23. sockjs-client (SockJS中分离出来的用于客户端使用的通信模块) vue项目使用SockJS插件实现webSocket通信
  24. stomjs (STOMP(Simple Text-Orientated Messaging Protocol) 面向消息的简单文本协议) vue项目使用SockJS插件实现webSocket通信
  25. swiper (Swiper常用于移动端网站的内容触摸滑动)
  26. vue-awesome-swiper (轮播图)
  27. @xkeshi/vue-barcode (条形码)
  28. jspdf (生成/导出pdf)
  29. jszip (打包成压缩文件)
  30. file-saver (下载文件)
  31. html2Canvas （根据 DOM 生成对应的图片）
  32. vue-drag-resize 可拖动缩放元素的Vue组件
vue-cron:这是一个cron表达式ui组件
05-02
vue-cron 这是一个cron表达式生成插件,基于vue与element-ui实现 依赖 Vue 2.0.0+ element-ui 2.0.0+ 安装方式 npm install vue-cron 引入方式 //前置配置 import Vue from 'vue' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI); //全局引入 import VueCron from 'vue-cron' Vue.use(VueCron);//使用方式：<vueCron></vueCron> //局部引入 import {cron} from 'vue-cron' export default { template: '<cron>',
Vue分页组件.vue
06-22
（原创）这是一个功能比较完善的vue分页组件，包含基本的数据统计，页面跳转，修改每页显示条数，当前页居中显示等，有兴趣的可以直接拿来用。
avue中地图使用实现地图的联动_GitHub - wqx0532/avue
weixin_31955925的博客
12-23 614
Avue-cli基于Avue、Vue、Element-ui实现的一套后台管理系统快速开发模板、开箱即用,它的核心是数据驱动UI的思想，让我们从繁琐的crud开发中解脱出来，它的写法类似easyUI，但是写起来比easyui更容易，因为它是基础数据双向绑定以及其他vue的特性。同时不知局限于crud，它还有我们经常用的一些组件例如，表单，数据展示卡，人物展示卡等，更多的组件还在开发兼容性兼容以下主流...
json 视图 js_呈现JSON树形视图的组件
cuk5340的博客
07-26 1007
json 视图 js Vue JSON组件 (Vue JSON Component) A collapsable tree view for JSON. This package is loosely based on vue-json-tree-view with a series of upgrades. I'm not contributing this back to that packa...
VueJSONTreeView一个基于Vuejs开发的JSON树视图
08-10
Vue JSON Tree View 一个基于Vue.js开发的JSON树视图
谷歌浏览器vue插件vue-devtools
04-10
这个插件可以在谷歌浏览器（Chrome）中安装，帮助开发者调试、检查和优化Vue应用。 Vue Devtools 提供了以下主要功能： 1. **组件树**：在Vue Devtools的“Components”面板中，你可以查看应用的组件结构。每个...
idea2023.5-vue插件包
最新发布
05-31
idea-vue插件包 不支持社区版
谷歌浏览器-vue插件-5.3.4-0.zip
02-23
本压缩包“谷歌浏览器-vue插件-5.3.4-0.zip”提供了一个Vue.js的插件，版本号为5.3.4_0，专为谷歌浏览器设计。 首先，让我们深入了解一下Vue.js。Vue的核心特性包括数据绑定、组件化、指令系统和虚拟DOM，这些都...
idea vue插件
04-12
然而，有时在IDEA中直接下载Vue插件可能会遇到网络问题，导致下载失败，特别是当连接速度慢或者服务器超时时。 针对这个问题，我们可以选择手动下载Vue.js插件的方式。在标题中提到的是2018.04.08版本的Vue插件，这...
Vue 插件，打印！好！.zip
12-01
vue-print-nb安装Vue2 版本Vue3 版本描述使用方法打印整个页面打印本地范围打印本地范围更多打印网址打印预览打印网址预览打印局部范围预览打印异步 URLv-print API安装在线DEMO在线演示Vue2 版本npm install vue-...
vue-json-tree-view：Vue.js的JSON树视图组件
02-06
Vue JSON树视图 演示和博客文章 您可以在JSFiddle上查看该，并通过阅读名为Vue.js中的 ，以创建该库。 安装 使用npm安装插件： npm install --save vue-json-tree-view 然后，在您的Application JavaScript中，添加： import TreeView from "vue-json-tree-view" Vue . use ( TreeView ) 做完了 用法 将tree-view元素放到HTML中您希望树形视图出现的位置。 < div> < tree-view :data =" jsonSource "
vue-cron_vue-cron_vuecrond组件_vuecron_
10-04
vue-cron表达式组件
Master-Detail-View:测试JSON主数据详细信息视图
05-26
主从视图 测试JSON主数据详细信息视图 在这里，我想找到使用MVC / razor来实现向导（例如用户注册，产品/产品详细信息表格或发票等应用程序）的MVC / razor的主/（多）详细视图的正确方法。
Cron前端生成工具
08-01
Cron前端生成工具，与Cron在线生成工具相同，同http://cron.qqe2.com/
vue-json-ui-editor.zip
04-04
基于Vue的JSON可视化编辑器，通过定义 JSON Schema 直接生成 UI 界面 挺好的，https://jsonui.js.org/
【亲测免费】 推荐使用：Vue-Cron —— 简易CRON表达式生成器
gitblog_00057的博客
08-09 1683
Vue-Cron 是一款专为Vue.js和Element-UI设计的高效、易用的CRON表达式生成插件。它能帮助开发者轻松创建和管理定时任务策略，提供直观的界面和完善的国际化支持。 ## 项目介绍 Vue-Cron 提供了一个简洁的交互界面，让用户能够通过可视化的操作来构建复杂的CRON表达式。其内置的实时更新功能使得每次更改都能立即体现在输入框中，方便调试和验证。不仅如此，该项目还具备完整的...
cron 表达式前端组件_Vuetify组件可更轻松地编辑CRON表达式
cuk5239的博客
07-29 2600
维克朗编辑 (vue-cron-editor) VueCronEditor is a component library built with Vue & Vuetify allowing for easier editing of CRON expressions. VueCronEditor是使用Vue＆Vuetify构建的组件库，可以更轻松地编辑CRON表达式。 View De...
【亲测免费】 vue-cron: Cron表达式UI组件开发指南
gitblog_00809的博客
08-08 2015
**vue-cron** 是一个基于Vue框架设计的cron表达式UI组件库. 该项目特别适用于那些需要在前端界面中提供cron表达式编辑功能的应用场景。通过简洁直观的接口，开发者可以轻松地将此组件集成到他们的Vue应用程序中，以实现对定时任务计划的精确控制。 该组件的亮点包括： - **兼容性**: 支持Vue 2.0.0及更高版本。 - **UI框架支持**: 兼容Element UI 2...
vue[分享一个cron表达式生成插件]
墨水白云的博客
09-15 6535
目标 前端进行各种操作之后，最终生成两个cron表达式，分别为开始时间和结束时间的cron表达式，且结束时间表达式的时间必须在开始时间之后，并且符合cron表达式的规则。 任务类型有：一次性任务 和 循环任务两种 一次性任务只需要选择任务周期，即任务的开始时间和结束时间，其范围可以是秒段，分段、时段、日段、月段、年段。 循环任务需要选择周期类型，分别为周期类型：秒、分、时、日、周、月、年。根据不同的选择要默认生成一些自带的内容 ...
Vue插件
04-24
### Vue.js 插件及其使用方法 #### 一、Vue.js 的插件概念 Vue.js 中的插件可以看作是对框架核心功能的一种增强工具。它们能够为项目提供额外的功能支持，比如路由管理、状态管理以及 UI 组件库等[^1]。 --- #### 二、常见的 Vue.js 插件列表 以下是几个常用的 Vue.js 插件： 1. **Vue Router** - 功能：用于实现单页面应用程序中的导航和路由管理。 - 使用场景：当需要在不同视图之间切换时使用。 - 安装方式： ```bash npm install vue-router@next --save ``` 2. **Vuex** - 功能：作为 Vue 应用的状态管理模式，帮助集中管理和共享数据。 - 使用场景：适用于复杂的应用程序，尤其是多个组件间存在大量交互的情况。 - 安装方式： ```bash npm install vuex@next --save ``` 3. **Axios** - 虽然 Axios 不是一个官方插件，但它常被封装成 Vue 插件形式使用，主要用于处理 HTTP 请求。 - 使用场景：与后端 API 进行通信。 - 安装方式： ```bash npm install axios --save ``` - 将其挂载至 Vue 原型上的示例代码： ```javascript import axios from 'axios'; const plugin = { install(Vue) { Vue.prototype.$http = axios; } }; export default plugin; ``` 4. **Element Plus (基于 Vue 3 的 Element UI 升级版)** - 功能：提供了丰富的前端 UI 组件集合。 - 使用场景：快速构建美观且响应式的界面。 - 安装方式： ```bash npm install element-plus --save ``` 5. **Vuetify** - 功能：Material Design 风格的 Vue UI 框架。 - 使用场景：希望遵循 Google Material Design 设计原则开发应用。 - 安装方式： ```bash npm install vuetify --save ``` 6. **Pinia (替代 Vuex 的新一代状态管理方案)** - 功能：更轻量化的状态管理解决方案，专为 Vue 3 打造。 - 使用场景：适合现代 Vue 项目的简单高效状态管理需求。 - 安装方式： ```bash npm install pinia --save ``` 7. **Vue CLI Plugins** - 功能：辅助开发者配置环境变量、集成第三方服务等功能。 - 使用场景：自动化脚本生成器或特定技术栈的支持。 - 添加 CLI 插件命令： ```bash vue add <plugin-name> ``` 8. **Vue Devtools** - 功能：浏览器扩展工具，方便调试 Vue 应用。 - 下载地址：Chrome 或 Firefox 浏览器商店均可获取。 --- #### 三、Vue.js 插件的定义与注册方法 ##### （1）Vue 2.x 版本中插件的创建与注册 - **对象定义插件**： ```javascript const myPlugin = { install(Vue, options) { // 自定义逻辑... Vue.component('my-component', {}); Vue.directive('my-directive', {}); Vue.prototype.$customMethod = () => console.log('Custom Method'); } }; Vue.use(myPlugin); ``` - **函数定义插件**： ```javascript function myPlugin(Vue, options) { Vue.prototype.$anotherMethod = () => console.log('Another Custom Method'); } Vue.use(myPlugin); ``` ##### （2）Vue 3.x 版本中插件的创建与注册 由于 Vue 3 引入了 Composition API 和新的实例化模式，因此插件设计略有调整： - **对象定义插件**： ```javascript const myPlugin = { install(app, options) { app.config.globalProperties.$customProperty = 'Global Property'; app.component('MyComponent', {}); app.directive('myDirective', {}); } }; const app = createApp(App); app.use(myPlugin).mount('#app'); ``` --- #### 四、IntelliJ IDEA 中 Vue.js 插件的相关操作 如果遇到无法在线搜索到 Vue.js 插件的问题，可以通过手动下载并导入的方式来解决。具体步骤如下： 1. 访问 JetBrains 官方插件市场链接[^2]； 2. 根据当前 IDE 的版本号匹配合适的插件版本[^3]； 3. 下载 `.zip` 文件后，在 IDEA 设置 -> Plugins 页面上传该压缩包； 4. 完成加载后重启软件生效。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值