解决vue-cli4 bootstarp 出现error ‘$‘ is defined but never used no-unused-vars问题

想在vue中用一下bootstarp 的响应式框架,结果jquery一直导不进来,网上教程都不全,一直给我报了很多错误,给我整蒙了一晚上,特此记录!!

1.首先一定要在项目的根目录下面npm

项目的根目录下面npm

2.下载jquery

npm install jquery --save-dev

3.也是在项目的根目录下面创建vue.config.js

参考第一张图片的vue.config.js位置。

const webpack = require("webpack");
module.exports = {
    // 基本路径
    publicPath: './',
    configureWebpack: {
        //支持jquery
        plugins: [
            new webpack.ProvidePlugin({
                $:"jquery",
                jQuery:"jquery",
                "windows.jQuery":"jquery"
            })
        ]
    },
}

4、package.json中eslint配置项env中添加”jquery”:true

package.json中eslint配置项env中添加"jquery":true

"jquery": true

5.还是在page.json中,第一个大括号的“rules”里面加入下面的代码

 注意:是在第一个大括号。

"rules": {
      "generator-star-spacing": "off",
      "no-tabs":"off",
      "no-unused-vars":"off",
      "no-console":"off",
      "no-irregular-whitespace":"off",
      "no-debugger": "off"
}

6、随便找一个vue界面调用,验证是否安装成功

$(function () {alert (123);});

随便找一个vue界面调用,验证是否安装成功

到这一步就解决了导入不了jQuery的问题!

7.最后导入bootstarp

npm install bootstrap --save-dev

指定版本用:

npm install [email protected] --save-dev

最后在main.js 里面添加:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';

到这里我们就可以在自己的项目中使用bootstarp 的响应式框架啦。

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 解决vue-cli4 bootstarp 出现error ‘$‘ is defined but never used no-unused-vars问题

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们