（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. 持续集成：TeamCity 的安装和使用

    TeamCity 本文初衷 让大家了解持续集成(CI),以及入门了解 JetBrains 家的 TeamCity 的一些简单实用. TeamCity 的一些复杂使用我暂时也不会,一样也是要看文档的,所 ...

  2. ORM框架SQLAlchemy的使用

    ORM和SQLAlchemy简介 对象关系映射(Object Relational Mapping,简称ORM),简单的来说,ORM是将数据库中的表与面向对象语言中的类建立了一种对应的关系.然后我们操 ...

  3. js&&jQuery实现省市区三级联动

    代码参考了:https://codepen.io/anon/pen/WzyNQB;根据自己的需要修改了一下,挂个出处 1.前端页面代码 <html> <head> <me ...

  4. javax.el.PropertyNotFoundException: Property [name] not readable on type

    该错误为el表达式读取javaBean属性时报错. 如: {$user.name} 原因: javaBean Class访问权限不够 解决办法: 将javaBean Class设置为public即可 ...

  5. js/jq和a标签（刷新/ajax/对话框/循环/select选中/checkbox选中/id的获取//数据处理成钱的格式）//js/jq分页

    1.刷新 <a href="javascript:history.go(-1)">返回上一页</a><a href="javascript: ...

  6. javaweb之请求的转发和重定向

    1.什么是请求转发和请求重定向? 请求转发: xxServlet收到请求,然后直接转发给yyServlet,然后yyServlet返回给客户端.整个过程中,客户端发出一个请求,收到一个响应. 重定向: ...

  7. RabbitMQ基础--总结

    一. RabbitMQ的五种工作场景: 1. 单发单收 2. 单发送多接收 +++++++++++++++++++++前面两种没有使用exchange++++++++++++++++++ 3. Pub ...

  8. 视差滚动-background-attachement

    之前项目中没有涉及到视觉滚动的网站,但是毕竟是一种常用的网站类别,不得不了解.实现方法很简单,做一下简单的分析... 概述:滚动视差是指多层背景以不同的速度移动,形成立体的运动效果,来带非常出色的视觉 ...

  9. css flexbox 弹性布局

    flexbox 即css flexible box layout. ie9及以下不支持flexbox. flex详细规范(https://www.w3.org/TR/css-flexbox/) 为什么 ...

  10. easyui numberbox输入框 编辑不可编辑的切换

    背景:申请单里需要选费用类型,费用类型有的有子明细项,有个合计项    当有子明细项的时候,合计项的值是通过弹出的子明细项价格的总和(设置为可编辑没问题,因为点击出来弹框,编辑不了)    没有子明细 ...