(已解决)引入本地bootstrap无效,bootstrap和jquery的引入

问题:

首先我是跟着张天宇老师下载的bootstrap文件,新建了一个css文件夹,但是这样子<link rel="stylesheet" type="text/css" src="./css/bootstrap.css">在index.html引入没有用。

解决办法:

1.把建立的css文件夹删除。

2.打开项目cmd,下载指定版本的bootstrap

复制代码
npm install bootstrap@3.3.5 --save

3.下载指定版本的jquery

复制代码
npm install jquery@3.6.0

4.下载完成后在package.json中可以看到下载的版本号

5.在bulid文件夹下的webpack.base.conf.js文件中添加代码

html 复制代码
var webpack = require('webpack')
//然后在module.exports加入以下代码,配置全局jquery环境
plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ],

6.在main.js中引入

javascript 复制代码
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
//不用引入什么 import $ from 'jquery' 了,因为已经全局引入了

(老师是在index.html引入<link rel="stylesheet" type="text/css" src="./css/bootstrap.css">,把这个删了不用在这里引入)

7.之后npm run dev就可以显示出效果了。

相关推荐
智航GIS10 小时前
10.4 Selenium:Web 自动化测试框架
前端·python·selenium·测试工具
前端工作日常10 小时前
我学习到的A2UI概念
前端
徐同保11 小时前
为什么修改 .gitignore 后还能提交
前端
一只小bit11 小时前
Qt 常用控件详解:按钮类 / 显示类 / 输入类属性、信号与实战示例
前端·c++·qt·gui
Mr -老鬼11 小时前
前端静态路由与动态路由:全维度总结与实践指南
前端
颜酱12 小时前
前端必备动态规划的10道经典题目
前端·后端·算法
wen__xvn12 小时前
代码随想录算法训练营DAY10第五章 栈与队列part01
java·前端·算法
大怪v13 小时前
前端佬们!!AI大势已来,未来的上限取决你的独特气质!恭请批阅!!
前端·程序员·ai编程
Mr -老鬼14 小时前
功能需求对前后端技术选型的横向建议
开发语言·前端·后端·前端框架
qq_4061761414 小时前
关于JavaScript中的filter方法
开发语言·前端·javascript·ajax·原型模式