每天一點點之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加載成功