---
# System prepended metadata

title: VueCli + Bootstrap (7-3)
tags: [7. Router路由, Vue]

---

# VueCli + Bootstrap (7-3)
###### tags: `Vue`、`7. Router路由`
2022.03.09

## Bootstrap 主檔案
#### 方式一. 添加BootstrapCDN
&emsp;&emsp;在public->index.html添加CDN。
![](https://i.imgur.com/hDypko8.png)

#### 方式二. npm 引入 Bootstrap
1. 下載套件
```
npm i bootstrap
```
2. 引入套件
 (1) 在資料夾下新增 src/assets/scss/ 新增all.scss 檔案
```
@import "../../../node_modules/bootstrap/scss/bootstrap.scss";
@import "../../../node_modules/bootstrap/scss/functions";
@import "../../../node_modules/bootstrap/scss/mixins";
```
![](https://i.imgur.com/wSNMrFu.png)

&emsp;&emsp;(2) App.vue中引入all.scss檔案
```
<style lang="scss">
  @import "@/assets/scss/all.scss";
</style>

```
![](https://i.imgur.com/FGyqLgV.png)

## 引入Bootstrap Icon
1. 安裝
```
npm i bootstrap-icons
```
2. 於 main.js 引入套件
```
import 'bootstrap-icons/font/bootstrap-icons.css'
```
![](https://i.imgur.com/2NPNOYB.png)

