我们要在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一样。

项目文件目录如下图:

在这里插入图片描述

然后就是往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'

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐