(已解决)引入本地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文件中添加代码

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

 

6.在main.js中引入

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就可以显示出效果了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/523263.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

免费在线搜索人名、电话号码、个人信息、定位、联系信息以及地址的开源网站

免费在线搜索人名、电话号码、个人信息、定位、联系信息以及地址的开源网站。 为大家推荐开源搜索电话号码及地址的网页。这些网站不仅提供了免费查找人员、电话号码、地址、区号、邮政编码和邮政编码的功能&#xff0c;还允许进行反向搜索&#xff0c;即通过输入电话号码找到…

蓝桥杯第十三届省赛C++B组(未完)

目录 刷题统计 修剪灌木 X进制减法 【前缀和双指针】统计子矩阵 【DP】积木画 【图DFS】扫雷 李白打酒加强版 DFS (通过64%&#xff0c;ACwing 3/11&#xff09;; DFS(AC) DP&#xff08;AC&#xff09; 砍竹子(X) 刷题统计 题目描述 小明决定从下周一开始努力刷题准…

【优选算法专栏】专题十六:BFS解决最短路问题(一)

本专栏内容为&#xff1a;算法学习专栏&#xff0c;分为优选算法专栏&#xff0c;贪心算法专栏&#xff0c;动态规划专栏以及递归&#xff0c;搜索与回溯算法专栏四部分。 通过本专栏的深入学习&#xff0c;你可以了解并掌握算法。 &#x1f493;博主csdn个人主页&#xff1a;小…

《QT实用小工具·十八》高亮发光按钮控件

1、概述 源码放在文章末尾 该项目实现了高亮发光按钮控件 可设置文本&#xff0c;居中显示。可设置文本颜色。可设置外边框渐变颜色。可设置里边框渐变颜色。可设置背景色。可直接调用内置的设置 绿色、红色、黄色、黑色、蓝色 等公有槽函数。可设置是否在容器中可移动&#…

MongoDB初探:安装与图形化界面保姆级使用指南

文章目录 前言一、MongoDB下载安装下载解压配置环境变量打开mongoDB 二、配置本地MongoDB服务创建文件下载服务测试服务 三、图形化界面Compass GUINavicat GUI 总结 前言 MongoDB是一种流行的开源、面向文档的NoSQL数据库程序。与传统的关系型数据库不同&#xff0c;MongoDB将…

数据可视化高级技术Echarts(快速上手柱状图进阶操作)

目录 1.Echarts的配置 2.程序的编码 3.柱状图的实现&#xff08;入门实现&#xff09; 相关属性介绍&#xff08;进阶&#xff09;&#xff1a; 1.标记最大值/最小值 2.标记平均值 3.柱的宽度 4. 横向柱状图 5.colorBy series系列&#xff08;需要构造多组数据才能实现…

2024.4.1-day06-认识 CSS(三大特性、引入方式)

个人主页&#xff1a;学习前端的小z 个人专栏&#xff1a;HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结&#xff0c;欢迎大家在评论区交流讨论&#xff01; day06-认识 CSS(三大特性、引入方式) 文章目录 day06-认识 CSS(三大特性、引入方式)作业…

【工具使用】使用Audition对比两个音源的频率特性变化

一&#xff0c;简介 本文主要介绍如何通过Audition比较算法输入和输出的频率特性&#xff0c;供参考。 二&#xff0c;操作步骤 这里以96K粉噪输入输出的音源来举例说明&#xff1a; 按照格式打开对应的音源&#xff0c;并使用快捷键“Alt Z”打开频率分析窗口&#xff1a…

vscode-插件开发-hello world-创建初始模板

目录 前言1.环境配置全局安装 yo, generator-code 2. 新建一个插件项目模板问题1: F5 按键无法启动launch.json调试(解决)问题1 描述:问题1: 找错误问题1: 可行的解决方案 3. 开发插件(添加自定义功能) 参考vscode官方示例&#xff1a;如何创建你的第一个插件开发项目模板的步骤…

第12届蓝桥杯省赛 ---- C/C++ C组

文章目录 1. ASC2. 空间3. 卡片4. 相乘5. 路径6.时间显示7.最少砝码8. 杨辉三角形9. 左孩子右兄弟 第12届蓝桥杯省赛&#xff0c;C/C C组真题&#xff0c;第10题不是很清楚&#xff0c;题解不敢乱放&#x1f601;&#x1f601;&#x1f601; 1. ASC 额。。。。 #include <i…

软文推广常用方式,媒介盒子揭秘

软文推广的核心在于“软”&#xff0c;即让品牌推广内容区别于传统硬广的形式出现&#xff0c;让读者在不知不觉中接受信息&#xff0c;从而潜移默化地改变消费者的消费观念&#xff0c;并引导其消费行为。由于这种推广方式更注重内容的质量和传播效果&#xff0c;因此往往能够…

Linux——静态库 共享库

1.库文件 1).库文件 库是一组预先编译好的方法的集合; Linux系统存储库的位置一般在/lib 和 /usr/lib (64位系统/usr/lib64) 库的头文件放在/usr/include 2).库的分类 静态库:libxxx.a(命名规则) 共享库:libxxx.so(命名规则) 3).准备文件: //add.c int add(int x,int y) { re…

nginx部署前端教程

目录 一、前言二、部署三、注意四、参考 一、前言 一般来说现在的软件项目&#xff0c;都是分用户端以及管理端的&#xff0c;并且是前后端分离的&#xff0c;这里我来记录一下部署两个前端的教程。 部署前端之前需要的准备工作是部署springBoot后端程序&#xff0c;这里我do…

数据结构基础:双链表结构、实现

继续和颦颦学C语言呀.......> 双链表的结构 这里的head 为头节点&#xff0c;是‘哨兵位’&#xff0c;实际不存储任何有效的数据 它的存在是为了遍历环链表避免死循环 双链表的实现 typedef int LTDataType; typedef struct ListNode { struct ListNode* next; //指针保存…

2024/4/6 DS18B20温度传感器

DS18B20温度传感器简介 DS18B20是一种常见的数字温度传感器&#xff0c;其控制命令和数据都是以数字信号的方式输入输出&#xff0c;相比较于模拟温度传感器&#xff0c;具有功能强大、硬件简单、易扩展、抗干扰性强等特点 测温范围&#xff1a;-55C 到 125C 通信接口&#…

通讯录----顺序表版本

1.通讯录的实现逻辑 对于通讯录&#xff0c;我们做的无非就是初始化&#xff0c;销毁。添加联系人数据&#xff0c;修改联系人数据&#xff0c;删除联系人数据&#xff0c;查找联系人数据&#xff0c;展示联系人数据&#xff1b; 这个不就和我们的顺序表的逻辑如出一辙吗&…

docker安装nacos,单例模式(standalone),使用mysql数据库

文章目录 前言安装创建文件夹"假装"安装一下nacos拷贝文件夹删除“假装”安装的nacos容器生成nacos所需的mysql表获取mysql-schema.sql文件创建一个mysql的schema 重新生成新的nacos容器 制作docker-compose.yaml文件查看网站 前言 此处有本人写得简易版本安装&…

SQLite 查询优化器概述(九)

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLite中的隔离(八&#xff09; 下一篇&#xff1a;SQLite下一代查询规划器(十&#xff09; 1. 引言 本文档概述了查询规划器和优化器如何 用于 SQLite 工作。 给定一个 SQL 语句&#xff0c;可能有几十个、几百…

C++——位图和布隆过滤器

在C中&#xff0c;哈希这种思想的应用场景有很多&#xff0c;位图就是其中的一种。 位图 位图&#xff1a;位图是一种哈希思想的产物&#xff0c;可以通过它来对数据进行快速的查找的方法&#xff0c;在位图中&#xff0c;有2种状态来表示在或者不在&#xff0c;即1/0。 位图…

2024 年广东省职业院校技能大赛(高职组)“云计算应用”赛项样题 4

#需要资源&#xff08;软件包及镜像&#xff09;或有问题的&#xff0c;可私聊博主&#xff01;&#xff01;&#xff01; #需要资源&#xff08;软件包及镜像&#xff09;或有问题的&#xff0c;可私聊博主&#xff01;&#xff01;&#xff01; #需要资源&#xff08;软件…