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

1.安装jquery

终端使用 npm 命令安装 ：

npm install jquery --save

2.找到babel.config.js文件 

有的小伙伴可能项目结构不一样文件 名字会有点不一样 可能是.eslintrc.js文件，接下来我们在env中配置 jQuery：true

 3.找到项目的根目录vue.config.js文件

如果在没有的情况下，可以创建一个，一般情况下新建项目是自动生成的，然后如下进行配置：

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

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

import $ from 'jquert'

但是个人爱好 一般使用

import jquery from 'jquert'

这是jQuery 的引入与配置，可以全局使用。

使用案例，简单的一个点击事件：点击消失隐藏

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="one">
    <div class="d">嗯哼</div>
    <p class="ww">踹出来了</p>
  </div>
</template>
<style lang="less">
.loginbox {
  display: none;
}
</style>
<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "one",
  date() {
    return {};
  },
  mounted() {
    this.text();
  },
  methods: {
    text() {
      // eslint-disable-next-line no-undef
      $(".d").click(function () {
        // eslint-disable-next-line no-undef
        $(".ww").toggle();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.d {
  color: aliceblue;
  background-color: rgb(82, 199, 71);
}
.d:hover {
  cursor: pointer;
}
</style>

点击前：

点击后隐藏：

 此篇到此结束！