Vue中使用JQuery

安装jQuery依赖

npm install jquery --save

或者用淘宝镜像cnpm

cnpm install jquery --save

webpack.base.conf配置文件相关添加如下图

const webpack = require('webpack')

// 添加代码
plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        jquery: "jquery",
        "window.jQuery": "jquery"
    })
],

在组件中引入jquery

import $ from "jquery";

整个HelloWorld.vue

<template>
  <div class="hello">
    <div id="test">{{msg}}</div>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "你好啊JQuery！"
    };
  },
  methods: {},
  mounted() {
    console.log($("#test"))
    $("#test").css({"background":'#0F0'})
  },
  created() {}
};
</script>

<style scoped>
</style>

效果图