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>
Logo

前往低代码交流专区

更多推荐