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

## Bootstrap 主檔案
#### 方式一. 添加BootstrapCDN
  在public->index.html添加CDN。

#### 方式二. 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";


  (2) App.vue中引入all.scss檔案

<style lang="scss">
  @import "@/assets/scss/all.scss";
</style>


## 引入Bootstrap Icon
1. 安裝

npm i bootstrap-icons

2. 於 main.js 引入套件

import 'bootstrap-icons/font/bootstrap-icons.css'