如果想在普通的HTML页面引入 jQuery 库的话，直接使用<script src="jQuery.js"></script>即可。但是如果要在Vue组件中使用jQuery库的话，使用这样的方式就不行了，需要使用以下方法
参考资料
安装jQuery依赖
在使用jQuery之前，我们首先要通过以下命令来安装jQuery依赖：
npm install jquery --save
# 如果你更换了淘宝镜像，可以使用cnpm来安装，速度更快
cnpm install jquery --save
修改配置文件
完成安装jQuery依赖之后，我们要修改 webpack.base.conf 文件配置文件。注意我现在的Vue版本是2.9.6，如果你使用的是Vue3.x版本的话，这个配置文件的位置可能不一样，需要你在项目中找一下。
首先添加一行代码，引入webpack，开头引入
const webpack = require('webpack')
如下图所示
1
2
3
4
5
6
| 'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
const webpack = require('webpack')
|
其次是在下图的位置，添加代码配置jQuery插件：
添加的代码块是
1
2
3
4
5
6
| plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
})
],
|
整体如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
})
],
output: {
...
},
resolve: {
...
},
module: {
...
},
node: {
...
}
}
|
在组件中引入jquery，进行使用
我们想在哪个组件中使用jQuery库，首先要使用如下命令引入jquery，然后就可以正常使用了
import $ from 'jquery'
比如我们要在 App.vue 组件中使用 jQuery，实例代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <template>
<div id="app">
</div>
</template>
<script>
import $ from 'jquery'
export default {
name: 'App',
components: {},
data: function () {
return {}
},
created:function(){
console.log($('#app'));
}
}
</script>
<style>
</style>
|
