每天一点点之vue框架开发 - 引入bootstrap

只使用css样式

 

如果在你的项目中只是使用css样式，那就不需要安装，直接全局引入样式就好

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

 

bootstrap提供的CDN加速服务

 

 

下载Bootstrap

1.安装Boostrap 

npm install --save-dev bootstrap

如果是第一次安装会报以下警告：

npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.1.3 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.1.3 requires a peer of popper.js@^1.14.3 but none is installed. You must install peer dependencies yourself.

可以看出，是缺少依赖，手动安装一下就好

npm install ajv@^6.0.0
npm install popper.js@^1.14.3
npm install jquery@1.9.1

 

2.在文件 App.vue 中js部分引入bootstrap

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

 

3.添加一段Bootstrap代码

<div class="row">
    <div class="col-md-4">1</div>
    <div class="col-md-4">2</div>
    <div class="col-md-4">3</div>
</div>

 

4.运行，查看页面显示如下，bootstrap加载成功