（1）到bootstrap官网下载所需版本的bootstrap.zip文件。

（2）将bootstrap.min.css以及bootstrap.min.js解压到assets文件夹，另外还需要将fonts字体文件夹解压到src文件夹下面。

（3）在main.js文件中通过

　　

import './assets/bootstrap.min.css'

import './assets/bootstrap.min'

引入bootstrap，引入完成之后，就可以在组件中使用bootstrap了。

另外需要注意的是bootstrap依赖于jQuery，需要先安装引入jQuery。

在Vue-cli项目中引入Bootstrap的更多相关文章

  1. 前端学习笔记系列一：10整体移动vscode代码块、VSCode 使用 stylus，配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  2. vue项目中引入bootstrap

    (1)引入Jquery文件,需要在bootstrap.min.js 之前引入. 1.npm install jquery --save-dev 2. plugins: [ new webpack.Pr ...

  3. react 项目中 引入 bootstrap

    react-bootstrap是一个非常受欢迎的针对react封装过的bootstrap,它本身不包含css,所以也是需要使用bootstrap原生库. 在create-react-app建的项目目录 ...

  4. Vuex内容解析和vue cli项目中使用状态管理模式Vuex

    中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...

  5. vue.cli项目中src目录每个文件夹和文件的用法

    assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:

  6. vue cli 项目中设置背景图

    https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...

  7. vue-cli项目中引入第三方插件

    前言 最近有小伙伴问道如何在vue-cli项目中引入第三方插件或者库,例如如果想在项目中使用jQuery中的Ajax请求数据呢?或者我想使用Bootstrap框架呢?等等这些问题,本篇博客将带你学习如 ...

  8. 关于Vue.cli 脚手架环境中引入Bootstrap时,table表格样式缺失的解决办法

    Vue+bootstrap不能正常使用table的样式 环境:下载官网的本地bootstrap包,然后在vue 的index.html引入bootstrap的css和js环境 问题描述:1. vue里 ...

  9. Vue中引入bootstrap导致的CSS问题

    最近在进行vue.js+webpack进行模块化开发的时候,遇到一个奇怪的问题. 问题是这样的: 1. 在main.js文件中引入bootstrap的js和css. 2. 自己写了一个Header.v ...

随机推荐

  1. Scrapy框架学习（二）Scrapy入门

    接下来以爬取quote.toscrape.com为例完成一遍Scrapy的抓取流程. 首先创建一个Scrapy项目.打开命令行,输入以下命令: scrapy startproject projectn ...

  2. 虚拟机centos笔记整理，持续更新~~

    远程拷贝文件:scp -r 文件名 主机名:完整路径名(冒号不能少)拷贝当前windows系统的文件到当前目录:rz -y 查找文件:updatedb 修改数据库locate 文件名 即可查找文件

  3. php实现对数组进行编码转换

    1.转换GB2312编码为UTF-8 //更改编码为utf8 protected function array2utf8($array){ $array = array_map(function($v ...

  4. mysql字符集的修改

    修改数据库字符集: 代码如下: ALTER DATABASE db_name DEFAULT CHARACTER SET character_name [COLLATE ...];   把表默认的字符 ...

  5. javaweb之EL自定义函数

    1.什么是EL自定义函数 EL自定义函数是在EL表达式中调用的某个java类的静态方法,这个静态方法需在web应用程序中进行配置才可以被EL表达式调用.EL自定义函数可以扩展EL表达式的功能,让EL表 ...

  6. When a java class is load by classloader, where the constant poll be put?

    Q:When a java class is load by classloader, where the constant poll be put? A:the "Non-Heap Mem ...

  7. LinearLayout中的android:layout_garvity的center_vertical和center_horizontal

    当LinearLayout的排列方向是 horizontal时,只有垂直方向上的对齐方式才会生效.因为此时水平方向上的长度是不固定的,每添加一个控件,水平方向上的长度都会改变,因而无法指定该方向上的对 ...

  8. 移动前端开发之viewport,devicePixelRatio的深入理解

    移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...

  9. Unicode汉字转码小工具

    点击按钮即可使用! 在这里粘贴或输入       转换结果:

  10. 01_Nginx入门

    [Nginx概述] Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-Like协议下发行.其特点是占有内存少,并发能力强,事实上Nginx ...