vue中正确使用jquery

1.下载安装

npm install jquery --save

2.webpack.base.conf.js中修改配置

2.1.webpack.base.conf.js最顶部引入

var webpack = require('webpack')

 

2.2.webpack.base.conf.js中module.exports添加一段代码

//原有代码	
resolve: {
		extensions: ['.js', '.vue', '.json'],
		alias: {
			'vue$': 'vue/dist/vue.esm.js',
			'@': resolve('src'),
		}
	},
	// 添加代码
	plugins: [
		new webpack.ProvidePlugin({
			$: "jquery",
			jQuery: "jquery",
			jquery: "jquery",
			"window.jQuery": "jquery"
		})
	],
//原有代码
	module: {

3.main.js里导入jQuery

import 'jquery'

4.剩下的就是在methods中的函数和vue钩子函数中使用jquery代码了，例如：

在mounted钩子函数中和methods中打印一个获取span标签的选择器

mounted() {
			console.log($("span"))
			this.hellojquery()
		},
		methods: {
			hellojquery:function(){
				console.log($("span"))
			}
		}