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!!!
在这里插入图片描述

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

前往低代码交流专区

更多推荐