在Vue项目中引入JQuery

版权声明：1.版权归原作者Moment ° 回忆 ✨所有； 2.未经原作者允许不得转载本文内容，否则将视为侵权； 3.转载或者引用本文内容请注明来源及原作者； 4.对于不遵守此声明或者其他违法使用本文内容者，本人依法保留追究权等。 https://blog.csdn.net/qq_35366269/article/details/84302334

错误提示：$ is not defined

使用步骤：

1、安装jquery

npm install jquery --save-dev

2、配置webpack

在项目根目录下的build目录下找到webpack.base.conf.js文件，在开头使用以下代码引入webpack

const webpack = require('webpack')

3、在module.exports中添加如下代码

plugins: [
  new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery"
  })
],

 

4、在main.js文件中全局引入

import jquery from 'jquery'
Vue.prototype.$ = jquery;

 5、在项目的根目录中的.eslintrc.js文件中添加如下代码：

    jquery: true,

6、测试是否引入成功

<template>
  <div>
    ============================42、在vue项目中使用JQuery=========================
    <div id="J_div">在vue项目中使用JQuery</div>

  </div>
</template>

<script>
  export default {
    name: "JQuery_42",
    data() {
    },

    /*
 mounted()函数是vue生命周期中的一个函数
 当DOM生成以后所调用的函数
 这个函数一般都是用来操作DOM
 * */
    mounted() {

      $('#J_div').click(function () {
        console.log("JQuery引入成功！");
      })

    },
    methods: {


    }


  }
</script>

<style scoped lang="scss">



</style>

效果图：