1 、vue项目中安装依赖
- 运行
npm install bootstrap - 将bootstrap导入项目main.js文件中
import "bootstrap"; - 运行
npm install --save jquery popper.js
2 、在main.js文件中导入编译后的css文件
- 代码如下
import "bootstrap/dist/css/bootstrap.min.css";
3、执行项目
- 运行命令
npm run serve
项目报错如下：
image.png - 按照上图错误提示执行命令
npm install --save @popperjs/core
4、再次执行项目并在初始项目About页面中添加代码
- 运行命令
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>
-
执行效果如下:
image.png
