首先你要知道你为什么使用jquery,如果使用Bootstrap,那引入jquery是必然的。如果你单纯的因为某些功能使用jquery建议还是另寻方法。jquery基本上都是对dom节点进行操控,进行css动画效果展示非常顺畅,在vue中使用可能会有点鸡肋,包也是比较大的,需要慎重考虑。
这里配置的是vue-cli3.0引入jquery的方法
一、安装jquery
注意这里下载的是1.9版本的兼容IE8,下载其它版本的@+版本号
npm i -- save jquery@1.9
二、打开vue.config.js 文件,添加以下代码
const webpack = require('webpack')
module.exports = {
// webpack配置
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery"
})
]
}
}
三、找到.eslintrc.js文件,在该文件的env对象中添加jquery等于true
module.exports = {
env: {
node: true,
jquery: true
}
};
四、测试是否能使用
export default {
name: 'HomeView',
mounted(){
console.log($)
//or
$('.head').hide()
}
}
ok引入完成。