如何在vue中引入jquery

一、安装jQuery依赖

在使用jQuery之前，我们首先要通过以下命令来安装jQuery依赖：
npm install jquery --save
如果你更换了淘宝镜像，可以使用cnpm来安装，速度更快
cnpm install jquery --save

二、修改配置文件

完成安装jQuery依赖之后，我们要修改 webpack.base.conf 文件配置文件。注意如果vue版本不一样，这个配置文件的位置可能不一样，需要你在项目中找一下,我这个版本是2.9.6（vue -V 这个命令可以查看vue的版本号）。

首先添加一行代码，引入webpack，如下图所示：

这是要加的代码：
const webpack = require(‘webpack’)

然后还是这个文件在下图的位置，添加代码配置jQuery插件：

这是要加的代码：
plugins: [
new webpack.ProvidePlugin({
jQuery: ‘jquery’,
$: ‘jquery’
})
],

三、在组件中引入jquery，进行使用

我们想在哪个组件中使用jQuery库，首先要使用如下命令引入jquery，然后就可以正常使用了
引入命令：
import $ from ‘jquery’ ;
测试一下是否引入成功，比如我们要在 HelloWorld.vue组件中使用jQuery，实例代码如下：

<template>
  <div>
   Hello world！
  </div>
</template>
<script>
import $ from 'jquery' ;
$(function () {  
    alert(123);  
 }); 
export default {
};
</script>

<style>
</style>

如果能出现弹出框’123’，说明成功。

---

新手总结，希望能帮助到你，如有不妥请谅解！

---