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>

效果圖