如何引入bootstrap

 npm install --save-dev bootstrap

在main.js中引入

import 'bootstrap/dist/css/bootstrap.min.css';

import 'bootstrap/dist/js/bootstrap.min.js';

然后运行，结果按照提示让执行这样的命令

npm install --save popper.js

然后，再运行  就能成功使用bootstrap了

vue-cli添加bootstrap的更多相关文章

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

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

  2. 快速上手最新的 Vue CLI 3

    翻译:疯狂的技术宅 原文:blog.logrocket.com/getting-sta- 概要:本文将指导你快速上手 Vue CLI 3,包括最新的用户图形界面和即时原型制作功能的使用步骤. 介绍 尤 ...

  3. Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

  4. Vue CLI 3使用：浏览器兼容性

    package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件),指定了项目的目标浏览器的范围.这个值会被 @babel/preset-env ...

  5. Vue CLI 3+tinymce 5富文本编辑器整合

    基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/ ...

  6. vue cli 3.0创建项目

    .npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...

  7. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

  8. 如何使用@vue/cli 3.0在npm上创建，发布和使用你自己的Vue.js组件库

    译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...

  9. 如何为你的 Vue 项目添加配置 Stylelint

    如何为你的 Vue 项目添加配置 Stylelint 现在已经是 9102 年了,网上许多教程和分享帖都已经过期,照着他们的步骤来会踩一些坑,如 stylelint-processor-html 已经 ...

  10. 使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息（包括：development、production）

    使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development.production) --mode 指定环境模式 ...

随机推荐

  1. Maven 梳理 - 常用三种archetype说明

    archetype:原型的意思,可理解为Maven项目模板工具包 常用archetype 1.cocoon-22-archetype-webapp 2.maven-archetype-quicksta ...

  2. Spring 梳理-Spring配置文件 -<context:annotation-config/>和<context:component-scan base-package=""/>和<mvc:annotation-driven /> 的区别

    <context:annotation-config/> 在基于主机方式配置Spring时,Spring配置文件applicationContext.xml,你可能会见<contex ...

  3. eclipse快捷键——纪念我突然失忆的脑子

    常用快捷键 1.快速new出来一个对象    Alt+/ 2.快速格式化代码              Ctrl+I 3.快速导入包                     Ctrl+Shift+O

  4. 插入排序--JavaScript描述

    记录一个插入排序写法 <script> var arr = [123,34,23,6,1,4,23,324,65,122]; for (let i =1, j = i ; i < a ...

  5. 集合线性表--List之LinkedList（队列与栈）

    队列和栈1. Queue 队列(Queue)是常用的数据结构,可以将队列看成特殊的线性表,队列限制了对线性表的访问方式:只能从线性表的一端添加(offer)元素,从另一端取出(poll)元素.队列遵循 ...

  6. 安装web3失败问题

    ① 首先可以先通过 npm cache verify 清理下缓存,在进行安装 ② 如果还是安装失败可以尝试 ---   npm install web3@^0.20.0  或者 npm install ...

  7. 旧瓶新酒-获取网络资源即爬取下载页面内容（图片、html、css、js等）

    这个java获取网络资源以前也写过不少 最近用到又重新写了一个,apache.commons.io中的例子就非常好,但是无法对请求进行详细设置 于是大部分照搬,局部替换以设置请求头 如需更加复杂的设置 ...

  8. docker升级后启动报错400 Client Error: Bad Request ("Unknown runtime specified docker-runc")

    宝塔面板docker升级后启动容器时报错400 Client Error: Bad Request ("Unknown runtime specified docker-runc" ...

  9. ORM查询简化

    文章出处 https://www.cnblogs.com/wupeiqi/articles/6216618.html 字段 常用字段 AutoField(Field) - int自增列,必须填入参数 ...

  10. 原生js动态添加新元素、删除元素方法

    1. 添加新元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...