这篇文章直接写不借助任何的工具直接安装bootstrap。
Bootstrap 的所有 JavaScript 插件都依赖 jQuery,因此 jQuery 必须在 Bootstrap 之前引入。
vue 引入jquery的方法请点击这里vue 引入jquery的步骤
进入正文,步骤写起来
第一步:安装bootstrap
命令行工具,进入项目文件夹,执行: npm install bootstrap--save
第二步:确认安装成功
提示安装成功后,在package.json 文件内的 "dependencies"中检查是否有 "bootstrap": "^4.3.1", (如没有 则需手动添加)如图
第三步:在main.js文件中引入css样式
import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min'
第四步:测试
重新启动vue-cli,页面组件中加如下测试代码:
<template> <div class="container-fluid"> <h1>看板</h1> <div class="row"> <div class="block col-md-4">.col-md-4</div> <div class="block col-md-4">.col-md-4</div> <div class="block col-md-4">.col-md-4</div> </div> </div> </template>
<style scoped> .block{ height: 200px; background-color: #9efa74; } </style>
结果图:
成功!!!
遇到的问题:
在使用的过程中发现col-md-offset-4这个栅格偏移的方法不生效,根源在于我装的是bootstrap4,将版本换成3就好了。
想看第二种引入方法点击这里使用vue+bootstrap的方式引入bootstrap