在vue中使用JQuery

布满荆棘的人生 2023-07-13 13:50 21阅读 0赞

## 在vue中使用JQuery ##

在vue中可能会使用到JQuery，那么就要安装他并引入调用，但是**在Vue2.0和Vue3.0中的使用的方式有所不同**。

最开始都要先下载jquery包

yarn add jquery
    或者
    npm i jquery

*  在Vue2.0中使用JQuery

下载好后，就只需要在main.js中引入，就可以全局使用了

import $ from 'jquery'
    //虽然引入的jquery呈灰色状态但是是可以使用的

![在这里插入图片描述][20200312164244724.png]

*  在vue3.0中使用Jquery  
    如果像vue2.0中相同的方式的话，那么就会报错 **显示$ is not defined**

方法：

1.1：打开.eslintrc.js 文件，找到env ，在里面 添加 jquery:true，默认应该是只有node:true，如果都没有，那就加上env  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70]

1.2：如果没有eslintrc.js 文件可以在package.json中配置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 1]

2：打开vue.config.js 文件（没有这个文件可以手动创建一个）  
在文件的头部位置加上const webpack = require(‘webpack’)，然后在module.exports中，添加

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 2]  
3.最后还是要在main.js中**import $ from 'jquery’**  
完成后就可以全局使用jquery了

[20200312164244724.png]: /images/20230529/41bc6a2caaa045d192da46229eb5533d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70]: /images/20230529/816963875d044558918b8d265f6a5446.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 1]: /images/20230529/15e80933032947529fb796f4ef593dfd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 2]: /images/20230529/c5c9a3991aa3406d8f0962d34563d19d.png