如何在vue中使用jquery第三方插件（vuecli使用jquery）

今天给各位分享如何在vue中使用jquery 第三方插件的知识，其中也会对vuecli使用jquery进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

1、2022-01-20：vue使用Jquery-contextmenu插件
2、Vue中使用jquery
3、如何在vue中引入第三方jquery，swiper等库
4、jquery组件怎么应用到vue
5、怎样在Vue.js中使用jquery插件

2022-01-20：vue使用Jquery-contextmenu插件

npm i jquery-contextmenu --save-dev

import Jquery_contextmenu from '@//jquery-contextmenu'

import 'jquery-contextmenu/dist/jquery.contextMenu.css'

Vue.use(Jquery_contextmenu)

npm install jquery

我的jquery是最新版本："jquery": "^3.6.0"

顶部：const webpack = require('webpack')

module.exports = {

configureWebpack: {

plugins: [

new webpack.ProvidePlugin({

$: 'jquery',

jQuery: 'jquery',

'windows.jQuery': 'jquery'

})

]

}

import $ from 'jquery'

使用：

$.contextMenu({

selector: '.' + connInfo.id, # 这里就是class类

items: {

'delete': {

name: '删除',

callback: function(key, opt) {

removeEdge(key)

}

})

由于使用npm安装插件，所以只能在node_modules中jquery-contextmenu中进行修改，这里我将文件取出来放在components中作为组件使用，可以自定义格式。

从node_modules去除上图的文件，放到自己想放的目录。

然后在页面中引入：

import '@/components/contextMenu/jquery.contextMenu.css'

import '@/components/contextMenu/jquery.contextMenu.min.js'

这里需要注意的是，要把main.js中的引入包的语句删除或者注释掉（下面三句不要了）：

import Jquery_contextmenu from '@//jquery-contextmenu'

import 'jquery-contextmenu/dist/jquery.contextMenu.css'

Vue.use(Jquery_contextmenu)

在下面的文件中可以随意修改样式

/components/contextMenu/jquery.contextMenu.css'

此时依旧需要在页面中引入 import $ from 'jquery'

引入jquery-contextMenu：

jquery官网：

替换font图标：

;spm=1001.2101.3001.4242.1utm_relevant_index=3

如何在vue中使用jquery第三方插件（vuecli使用jquery）,如何在vue中使用jquery第三方插件,信息,第三方,app,第1张

Vue中使用jquery

在vue项目中，需要实现某些特定的功能时，使用mvvm模式不易实现。因此引入jquery包来完成需求

jquery中的触发事件可以自己定义在mounted中，如果需要使用vue中data的数据，直接使用this.msg是无法使用的，需要另外定义const _this = this,

存储this之后便可以在事件中使用_this.msg数据了。

需求：在品牌处可以输入，并且会有模糊搜索的下拉框，也可下拉选择，在输入完毕后检验值是否在下拉框中存在，聚焦时蓝色边框，change时如果不存在则红框显示，存在的话就绿框提示，（就是带输入建议的输入框）

问题：使用element-ui中的el-autocomplete组件，开始通过失焦事件来验证，但是如果选择了下拉框某个值时（选中后会将下拉框的值赋给上面的输入框），失焦事件触发会在赋值之前，因此拿失焦时输入框的值来进行判断时错误的，在先改变输入框的值后再去选择下拉框,change事件有同样的bug，没办法只能自己引入jquery来完成

点击输入框后，通过placeholder判断是否是品牌下的的输入框，因为每个输入框都有这个类，如果是的话则增加一个类名，如果第一次点击的位置和第二次鼠标点击的位置都是品牌下的输入框，则执行相应的逻辑判断,

在逻辑执行完后就删除其他处同样的类名inputList

此处是为了模拟出输入框的change事件，因为在聚焦时会添加inputList这个类名。所以这里可以判断是否是自己想要的位置，如果是的话给一个标志位getindex,当点击到品牌下的输入框时，如果第二次的点击位置不是品牌其他位置的输入框，则进行逻辑判断

如何在vue中引入第三方jquery，swiper等库

一 .引入swiper(全局，局部)

方法一：全局引入，也是最暴力的，但是也是有好处坏处（同时加载，但是不能保证同时下载）

link href="" rel="stylesheet"script src=""/script12

组件中可以直接使用的swiper了

_initSwiper() { const container = this.$refs.swiper; const config = {

effect: 'coverflow',

slidesPerView: 'auto',

centeredSlides: true,

initialSlide: this.activeIndex,

loop: true,

autoplay: 1000,

speed: 1000,

coverflow: {

rotate: 0,

stretch: -30,

depth: 100,

modifier: 0.7,

slideShadows: false,

}; this.mySwiper = new Swiper(container, config);

}1234567891011121314151617181920

2.方法二：main.js 中

import '../node_modules/swiper/dist/css/swiper.min.css';import 'swiper';12

执行上面的_initSwiper()的方法即可

3.方法三：局部的引入的，有时只想的单个组件中使用某一个的库，方法如下

section ref="swiper" class="swiper-container"

div class="swiper-wrapper"

div class="demo swiper-slide" v-for="item in colorList" :style="`backgroundColor:${item}`"/div

/div/sectionscript

let swiperAsync = import('swiper') //引入的swiper.js（node_modules）的方法

export default {

data(){ return {

colorList: ['red', 'yellow', 'gray', 'pink']

}

methods: {

async _initSwiper() { let Swiper = await swiperAsync; //异步加载的

const container = this.$refs.swiper; //ref='swiper'

const config = { //swiper的参数配置

effect: 'coverflow',

slidesPerView: 'auto',

centeredSlides: true,

initialSlide: this.activeIndex,

loop: true,

autoplay: 1000,

speed: 1000,

coverflow: {

rotate: 0,

stretch: -30,

depth: 100,

modifier: 0.7,

slideShadows: false,

}; this.mySwiper = new Swiper(container, config);

mounted(){ this._initSwiper();

}

}/scriptstyle lang="scss" scoped

/*@import '../assets/styles/swiper.min.css'; !*静态资源的文件*!*/

@import '../../node_modules/swiper/dist/css/swiper.min.css';/style12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

二引入的jquery的方法

全局的方法

script src=""/script1

组件中可以直接使用的 ‘$’的方法

局部的方法：

npm install jquery -D1

需要使用的组件中引入

import $ from 'jquery'1

jquery组件怎么应用到vue

在Vue.js中使用jquery插件需要利用ProvidePlugin导入jquery全局库。1、在build/webpack.dev.conf.js和build/webpack.prod.conf.js中配置即可。2、在模块中使用的时候代码如下：plugins:[//这里是需要导入的插件列表，定意思jquery为全局参数newwebpack.ProvidePlugin({$:'jquery',jquery:'jquery','window.jQuery':'jquery',jQuery:'jquery'})]也可以使用import的这种写法：importjQueryfrom'jQuery'ready:function(){varself=this;jQuery(window).resize(function(){self.$refs.thisherechart.drawChart();})},