【vue项目用到的插件】

最新推荐文章于 2025-10-26 23:42:05 发布
原创 最新推荐文章于 2025-10-26 23:42:05 发布 · 302 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

本文列举了Vue项目中常用的一些插件，包括vue-seamless-scroll用于无缝滚动，qs进行数据序列化，vue-qr和qrcanvas生成二维码，normalize.css做CSS初始化，vuedraggable和sortablejs提供拖动功能，Lodash作为实用工具库，以及vxe-table和vue-number-animation分别用于表格操作和数组滚动动画。

vue项目中可能会用到插件

vue-seamless-scroll（无缝滚动）

vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求。目前支持上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能
vue-seamless-scroll官网

qs（数据序列化）

可以对象进行序列化；并对字符串进行反序列化
与JSON的相同点：

  • 都具有序列化和反序列化的功能
  • 均有stringify()和parse()函数

不同点：

  • qs是将对象序列化用于url上
  • JOSN将数据转化为JSON，而JOSN反序列化是将JSON数据反序列为Object

在线二维码转换

在线二维码转换链接

vue-qr（二维码生成）

目前不支持IE
vue-qr使用了解

qrcanvas（二维码生成）

gitHub地址

normalize.css（CSS初始化）

标准化css在不同浏览器的样式 。官网

vuedraggable（可拖动插件）

Vue Draggable是一个Vue组件，允许拖放和同步视图模型数组。可以利用其抛出的函数获取变换顺序后的数组并进行相关的逻辑处理。
官网

sortablejs（拖动组件）

功能强大的JavaScript 拖拽库
sortablejs

Lodash

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
lodash

vxe-table

一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项等
vxe-table官网

vue-number-animation（数组滚动插件）

https://www.npmjs.com/package/vue-number-animation

bigBravery_L
关注
【vue生成二维码】1.将后端返回的二维码字符串生成二维码；2.下载功能
weixin_48596030的博客
11-15 2699
【vue生成二维码】将后端返回的二维码字符串生成二维码
vue组件和插件使用
yeanhoo的博客
08-23 962
如用户登录后，用户信息会存储在全局状态中，如果不持久化状态，那么每次刷新用户都需要重新登录了，所以要用到pinia。7、按照项目框架搭建目录、文件、代码：如router、views、store、api…src目录下新建config目录，config目录下新建nprogress.ts文件。src目录下创建store目录，store目录下创建文件index.ts。src目录下创建api目录，api目录下创建文件request.ts文件。创建src/icons/svg目录，在目录中放入任意图标。
vue插件
01-08
vue插件
vue中生成二维码的插件（vue-qriously）
weixin_49203377的博客
04-12 4061
需求：项目中需要把链接地址生成二维码，用户扫描二维码就可以打开页面 实现如下：使用了vue-qriously插件 使用步骤： 安装 npm install vue-qriously --save-dev main.js入口文件中引入 import Vue from 'vue' import VueQriously from 'vue-qriously' Vue.use(VueQriously) 在vue文件中使用 <template> <qriously :valu
Vue插件
最新发布
qq_51626500的博客
10-26 349
Vue插件
VUE常用插件库总结
热门推荐
诗水人间
10-11 13万+
一、UI组件及框架 element- 饿了么出品的Vue2的web UI工具套件 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI 组件库 Keen-UI- 轻量级的基本UI组件合集 vue-material- 通过Vue Material和Vue 2建立精美的app应用 muse-ui- ...
vue插件大全汇总，你要的都这里，赶紧收藏下！
2401_85013639的博客
05-16 3003
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）如果你需要这些资料，可以戳这里获取 既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！由
vue拖拽排序插件vuedraggable使用方法详解
12-08
大家好，最近做的项目要用到拖拽排序，我现在的项目是vue项目，所以我就屁颠屁颠的去百度有木有这样功能的插件，我就知道一定会有，那就是vuedraggable，这是一款很棒的拖拽插件，下面我来说一下怎么引入 首先在vue...
vue视频播放插件vue-video-player的具体使用方法
12-13
可以全局引入插件，也可以在需要用到该插件的组件内单独引入（二选一） 【1】全局引用， 在main.js里面导入并引用 import VideoPlayer from 'vue-video-player' import 'vue-video-player/src/custom-theme.css' ...
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
08-27
在 Vue 项目中引入 tinymce 富文本编辑器需要完成以下几个步骤：资源下载、初始化、扩展插件。 资源下载 首先，需要下载 tinymce 的 Vue 组件 tinymce-vue，使用以下命令： ``` npm install @tinymce/tinymce-vue ...
Vue中qs插件的使用详解
01-19
之前用Vue+element写了一个后台管理系统，在登录时使用axios请求数据传参时无法正常的获取数据。之后也是一通百度，发现原因是传递参数要将参数序列化。 这里使用了qs插件： 简单来说，qs 是一个增加了一些安全性的...
Vue常用插件汇总
2401_84150191的博客
04-13 3734
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可获取[外链图片转存中…(img-wmj3LHAs-1712977961250)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！[外链图片转存中…(img-uMrKd7zw-1712977961251)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
[vue] Vue中插件的定义 Vue.use()
qq_14993591的博客
11-07 343
功能： 用于增强Vue 通常用来为 Vue 添加全局功能 简单案例 plugins.js export default { install(){ console.log('@install'); } } main.js //引入Vue import Vue from 'vue' //引入App import App from './App.vue' //引入插件 import plugins from './plugins' //关闭Vue的生产提示 Vue.config.prod
Vue 插件
海胆的博客
08-08 155
常见的应用范围： 添加全局方法或者 property。如：vue-custom-element 加全局资源：指令/过滤器/过渡等。如：vue-touch） 通过全局 mixin 来添加一些组件选项。(如vue-router) 添加全局实例方法，通过把它们添加到 config.globalProperties 上实现。 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router 在单文件中创建插件 export default { install: (app, option
vue 插件
MCCLS的博客
07-21 412
要点： 插件： 可以帮助我们去增强vue vue的插件本质为一个对象,{}但是里面一定要有install安装 插件的创建： 在src文件中写入一个plugins.js文件里面写下图代码,别忘了暴露 而vue里,是先应用你的插件再去创建你的vm 也就是说再main.js里面要再创建你的vm前写入引用插件和使用插件 如下图所示,因为这边使用的是默认暴露,所以不需要写{}，然后进行Vue.use(plugins)使用插件 运行发现输出了 然后我们对它的传入参数...
Vue 插件（plugin）
qq_35779012的博客
11-23 7664
插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制,一般有下面几种： 添加全局方法或者 property。如：vue-custom-element 添加全局资源：指令/过滤器/过渡等。如vue-touch 通过全局混入来添加一些组件选项。如vue-router 添加 Vue 实例方法，通过把它们添加到Vue.prototype上实现。 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如vue-router 一、开发插件...
Vue的插件
路人的博客
08-24 804
对象 . install = function(Vue , options) {//1.添加全局过滤器 Vue . filter(... .) //2.添加全局指令 Vue . directive(... .) //3.配置全局混入（合） Vue . mixin(... .) //4.添加实例方法 Vue . prototype . $myMethod = function() {
vue项目如何使用插件
09-28
在vue项目中，不同插件的使用方法各有不同，以下是一些常见插件的使用方式： - **Vant插件**：使用自动按需引入的方法，首先使用`npm install -g @vue/cli`命令全局安装Vue Cli脚手架，再用`vue create myAppName`创建项目。在项目根目录下，使用`npm i vant -S`安装vant，使用`npm i babel-plugin-import -D`安装babel插件，它会在编译过程中将`import`的写法自动转换为按需引入的方式，最后配置`babel.config.js`文件 [^1]。 - **自定义插件**：以自定义插件`MyPlugin`为例，在`MyPlugin.js`文件中，引入自定义组件并使用`Vue.component`挂载到全局上。在`MyPlugin`类中，可定义方法并使用`Vue.prototype`挂载到全局上。在`install`方法里，可添加全局方法或property、全局自定义指令、注入组件选项、全局添加实例方法和绑定全局组件等 [^2]。 - **vue-tour插件**：使用Yarn安装`vue-tour`，命令为`yarn add vue-tour`。在代码中引入`vue-tour`和其CSS文件，使用`Vue.use(VueTour)`启用插件 [^3]。 - **Swiper插件（版本5）**：在`main.js`中引入swiper的样式，这样可全局使用。在需要用到swiper插件的组件中引入swiper，同时在样式文件中引入`swiper.min.css` [^4][^5]。 ### 代码示例 #### Vant插件配置babel.config.js示例 ```javascript module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ] } ``` #### vue-tour插件使用示例 ```javascript import Vue from 'vue' import App from './App.vue' import VueTour from 'vue-tour' require('vue-tour/dist/vue-tour.css') Vue.use(VueTour) new Vue({ render: h => h(App) }).$mount('#app') ``` #### Swiper插件组件引入示例 ```vue <template> <div class="banner1"> <!-- Swiper内容 --> </div> </template> <script> import Swiper from "swiper"; export default { mounted() { new Swiper('.banner1', { // Swiper配置 }); } } </script> <style lang="scss" scoped> @import "../../node_modules/swiper/css/swiper.min.css"; .banner1 { width: 100%; height: 200px; img { width: 100%; height: 100%; } } </style> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值