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

在Vue项目中使用Bootstrap响应式框架,遇到jQuery导入问题。通过npm安装jQuery和创建vue.config.js配置Webpack解决。在package.json中添加eslint配置,修改webpack规则,并在组件中验证jQuery安装。最后引入Bootstrap样式和脚本。
摘要由CSDN通过智能技术生成

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

1.首先一定要在项目的根目录下面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

"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);});

 完成!

7.最后导入bootstarp

npm install bootstrap --save-dev

指定版本用

npm install bootstrap@3 --save-dev

最后在main.js 里面添加

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值