如何在Vue3.0中引入jQuery并使用

1、安装jQuery
需要在项目根目录下使用 npm 命令：

npm install jquery --save

2、vue.config.js文件
在项目根目录下创建一个 vue.config.js 文件（如果已经存在无需创建），进行如下配置：

const webpack = require('webpack')
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'windows.jQuery': 'jquery'
      })
    ]
  }
}

3、.eslintrc.js文件
在项目目录中找到 .eslintrc.js 文件，在 env 中配置 jquery：true

4、最后在 main.js 文件中导入 jQuery

至此完成 jQuery 的引入和配置，可以全局使用。

使用例子

<template>
  <div class="home">
    <div class="d"></div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  date() {
    return {}
  },
  mounted() {
    this.text()
  },
  methods: {
    text() {
      $('.d').click(function () {
        alert('1')
        $(this).hide()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.d {
  width: 100px;
  height: 100px;
  background-color: cadetblue;
}
</style>