在vue项目中引入Jquery插件的方法

对于习惯使用jquery书写规则的我来说，冷不丁的开发vue项目感到有点吃力，很多地方还需要去查阅资料，虽然vue用起来确实方便，但是任何新事物总得有个适应的过程，在过度的这段时间，我感觉还是使用jquery比较方便一些，于是就去请教了度娘和谷大嫂两位大神，下面是我将jquery引入vue项目的过程。

1、首先需要下载Jquery依赖，执行一下命令即可：

npm install jquery --save

2、修改vue的配置文件，找到vue.config.js文件，添加如下代码

const webpack = require('webpack')
module.exports = {
  chainWebpack: config => {
    config.plugin('provide').use(webpack.ProvidePlugin, [{
      $: 'jquery',
      jquery: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }])
  }
}

3、接下来就是我们熟悉的vue引入依赖库的方法了

import $ from "jquery";

4、写一段代码试试效果

<template>
  <button>点我弹窗</button>
</template>

<script>
// 引入jquery
import $ from "jquery";
$(function () {
  $("button").click(function () {
    alert("点击了");
  });
});

export default {};
</script>

<style>
</style>