vue-cli3.X版本安装jQuery及配置

最新推荐文章于 2023-11-10 17:25:46 发布

清风是你

最新推荐文章于 2023-11-10 17:25:46 发布

阅读量1.5k

点赞数 1

分类专栏：前段开发文章标签： vue jQuery

原文链接：https://www.cnblogs.com/panghu123/p/11696168.html

版权

前段开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue-cli3 安装jQuery
vue-cli3.0 没有webpack.config.js 配置文件
：所以在一些博客教程中是说的在webpack.config.js 里面添加var webpack=require(‘webpack’);这样一句话。
我找了半天没看见这个文件夹，后来发现cli3之后就没有这个文件夹了，这么实现在vue里面使用jquery呢？

参考下面步骤：

1、命令行工具，进入项目文件夹，执行： npm install jquery --save

2、提示安装成功后，在项目根目录下的package.json 文件内的 "dependencies"中检查是否有 “jquery”: “^3.3.1”（或其他版本）, （如没有则需手动添加）,如图：
在这里插入图片描述

3、在项目根目录下的package.json 文件内的 “eslintConfig"中检查，看’env对象下面是否有"jquery”:true （如没有则需手动添加）,如图：
在这里插入图片描述

4、在文件根目录下新建vue.config.js文件，在文件中加上这样的话：（其他教程分两步，我合并成一步了，0.0图省事儿）

在这里插入图片描述
const webpack = require(‘webpack’)
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$:“jquery”,

            jQuery:"jquery",
            "windows.jQuery":"jquery"
        })
    ]
},

}
5、在main.js文件夹中引入： import $ from 'jquery

然后重启项目（不重启可能会报错，我的就是报错了，重启就好了）

补充：在根目录下新建vue.config.js文件，然后在里面添加配置信息和老版本cli在webpack.config.js 中添加配置是一样的效果，
这是因为vue-cli3内部高度集成了webpack，一般来说使用者不需要再去知道weboack做了什么，所以没有暴露webpack的配置文件，
但我们依然可以创建vue.config.js 去修改默认的webpack