vue-cli4最新版中怎么引入jQuery

た入场券 2023-02-17 05:12 67阅读 0赞

**我们要在vue-cli4最新版中引入jquery主要有以下三个步骤**

1.安装jquery
    	2. 添加vue.config.js文件
    	3. 引入jquery

## 首先第一步先安装jQuery ##

npm install jquery --save 或者 npm i jquery --save

## 第二步添加`vue.config.js`文件 ##

**因为最新版的vue-cli脚手架创建的项目文件夹中没有build文件夹，同时也没有`webpack.base.config.js`配置文件，但是我们可以在项目根文件目录下创建一个`vue.config.js`文件，用来配置项目相关信息，作用跟旧版本创建的项目文件夹中的`webpack.base.config.js`一样。**

#### 项目文件目录如下图： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70]

#### 然后就是往`vue.config.js添加以下一段代码：` ####

// 引入jq需要加入以下代码
    const webpack = require('webpack')
    
    module.exports = { 
        chainWebpack: config => { 
            config.plugin('provide').use(webpack.ProvidePlugin, [{ 
                $: 'jquery',
                jquery: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery'
            }])
        }
    }

## 第三步引入jQuery ##

#### 最后就是在需要的地方引入jquery即可，代码如下： ####

import $ from 'jquery'

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200612155913806.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200612161225540.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA==,size_16,color_FFFFFF,t_70