在vue中使用JQuery
在vue中可能会使用到JQuery,那么就要安装他并引入调用,但是在Vue2.0和Vue3.0中的使用的方式有所不同。
最开始都要先下载jquery包
yarn add jquery
或者
npm i jquery
- 在Vue2.0中使用JQuery
下载好后,就只需要在main.js中引入,就可以全局使用了
import $ from 'jquery'
//虽然引入的jquery呈灰色状态但是是可以使用的
- 在vue3.0中使用Jquery
如果像vue2.0中相同的方式的话,那么就会报错 显示$ is not defined
方法:
1.1:打开.eslintrc.js 文件,找到env ,在里面 添加 jquery:true,默认应该是只有node:true,如果都没有,那就加上env
1.2:如果没有eslintrc.js 文件可以在package.json中配置
2:打开vue.config.js 文件(没有这个文件可以手动创建一个)
在文件的头部位置加上const webpack = require(‘webpack’),然后在module.exports中,添加
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
]
}
3.最后还是要在main.js中import $ from 'jquery’
完成后就可以全局使用jquery了