在vue中配置jQuery环境

vue以及jQuery版本

使用的都既是当前最新的版本

一、如何配置？

两种方法进行配置。
1.在main.js中进行配置
2.修改配置文件vue.config.js进行配置
（个人推荐第二种，配置完成即可全局使用，第一种有时候还会报错）

二、配置步骤

1.使用第一种main.js方法引入

代码如下（示例）：

import $ from "jquery"
Vue.use($);

main.js完整代码如下

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import $ from "jquery"
Vue.use($);
Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

2.修改配置文件应用

首先找到在文件根目录找到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"
      }
    ]);
  }
};

三、测试一波

<template>
  <div id="div">

  </div>
</template>
<script>
export default {
  mounted () {
    $("#div").html("hello world")
  },
}
</script>

效果如下：
非常perfect！！！

说简单也不简单，对于初学者来说，说难也不难，在配置环境中也碰到了很多很多错误，也有一些我没有碰到的错误，大家都可以跟我提一下，希望大家能互相进步