(已解决)引入本地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就可以显示出效果了。

相关推荐
张元清10 小时前
React Hooks vs Vue Composables:2026 年全面对比
前端·javascript·面试
yuki_uix10 小时前
从三个自定义 Hook 看 React 状态管理的设计思想
前端·javascript
大漠_w3cpluscom10 小时前
如何在 clamp() 中使用 auto 值
前端·css·html
Younglina10 小时前
🏸 从零打造一个羽毛球球线追踪网站:纯前端实战指南
前端
C澒10 小时前
微前端容器标准化:从碎片化到统一架构的渐进式改造
前端·架构
CyrusCJA10 小时前
JavaScript原型与super关键字
前端·javascript·js
左耳咚11 小时前
Claude Code 技术全景概览
前端·ai编程
2601_9534656111 小时前
m3u8live.cn深度解析:一款专为开发者打造的 M3U8 调试工具
java·前端·django·音视频·开发工具
娇娇yyyyyy11 小时前
QT编程(9): QTextEdit
前端·qt
zzb158011 小时前
RAG from Scratch-优化-routing
java·前端·网络·人工智能·后端·python·mybatis