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

相关推荐
姜至2 分钟前
el-calendar实现自定义展示效果
前端·vue.js
烛阴12 分钟前
Lua中的三个点(...):解锁函数参数的无限可能
前端·lua
拉不动的猪17 分钟前
webpack分包优化简单分析
前端·vue.js·webpack
德莱厄斯23 分钟前
没开玩笑,全框架支持的 dialog 组件,支持响应式
前端·javascript·github
非凡ghost1 小时前
Affinity Photo(图像编辑软件) 多语便携版
前端·javascript·后端
非凡ghost1 小时前
VideoProc Converter AI(视频转换软件) 多语便携版
前端·javascript·后端
endlesskiller1 小时前
3年前我不会实现的,现在靠ai辅助实现了
前端·javascript
用户904706683571 小时前
commonjs的本质
前端
Sailing1 小时前
5分钟搞定 DeepSeek API 配置:从配置到调用一步到位
前端·openai·ai编程
Pa2sw0rd丶1 小时前
如何在 React 中实现键盘快捷键管理器以提升用户体验
前端·react.js