01_vue(vue-cli3)中使用jQuery

第一步(安装)

• 1.yarn add jquery
• 2.npm install jquery

第二步(配置)

• 在vue项目中建一个 vue.config.js 的配置文件
• 文件中的代码如下

const webpack = require('webpack')

module.exports = {
  // 禁止使用eslint
  lintOnSave: false,
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "windows.jQuery": "jquery"
      })
    ]
  }
}

第三步(使用)

在组件中代码如下

<template>
  <div class="index">
    <ul>
      <li>怎么了1</li>
      <li>怎么了2</li>
      <li>怎么了3</li>
      <li>怎么了4</li>
    </ul>
    <div class="main" id="main"></div>
  </div>
</template>
<script>
$(function() {
  $("#main").click(function(e) {
    console.log(e.target.tagName);
  });
  $(".index ul li").click(function(e) {
    console.log(this);
    $(this)
      .css("color", "yellow")
      .siblings()
      .css({ color: "red", border: "2px solid red" });
  });
});
export default {
  name: "Index"
};
</script>