1 僻澎、vue項(xiàng)目中安裝依賴
- 運(yùn)行
npm install bootstrap - 將bootstrap導(dǎo)入項(xiàng)目main.js文件中
import "bootstrap"; - 運(yùn)行
npm install --save jquery popper.js
2 序调、在main.js文件中導(dǎo)入編譯后的css文件
- 代碼如下
import "bootstrap/dist/css/bootstrap.min.css";
3、執(zhí)行項(xiàng)目
- 運(yùn)行命令
npm run serve
項(xiàng)目報(bào)錯(cuò)如下：
image.png - 按照上圖錯(cuò)誤提示執(zhí)行命令
npm install --save @popperjs/core
4、再次執(zhí)行項(xiàng)目并在初始項(xiàng)目About頁(yè)面中添加代碼
- 運(yùn)行命令
npm run serve
<template>
<div class="about">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
</div>
</template>
-
執(zhí)行效果如下:
image.png
