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

最新推荐文章于 2024-03-27 14:46:40 发布

smileForward

最新推荐文章于 2024-03-27 14:46:40 发布

阅读量5.6k

点赞数 10

CC 4.0 BY-SA版权

文章标签： vue webpack jquery vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_45000814/article/details/106717471

本文详细介绍了在Vue CLI4最新版项目中引入jQuery的三个步骤：安装jQuery，添加并配置vue.config.js，以及在项目中引入jQuery，使开发者能够顺利地在现代Vue项目中使用jQuery。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们要在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'
        }])
    }
}