前情提要
最近正在努力學 Vue3，原因有點複雜，但是晚了有點累，改天再說（任性
不過學著學著總是來到了需要開始架構HTML的時候。
雖然之前有試著自己切版，但是總是想要輕鬆一點（不然自己累，學生也累），因此希望用Bootstrap來當切版架構使用。
最近Bootstrap 5 的開發來到了 beta-2 ，總覺得離正式 release 不遠了。
正巧的事，Bootstrap5開始使用vanilla js，而我也剛好只會vanilla js（之前都是玩Python、C#等，沒在認真學前端，只知道前端御三家，會看會基本的而已），所以就一拍即合，開始認真用Bootstrap5。
但是在import進入vue cli時總是有問題，因此紀錄一下解決方案
解決方案1：全部使用cdn
如題所說，當我們用 vue cli 建構專案時，會產生一個 /public/index.html，這時候在這裡面加入cdn連結，就可以在其他的 .vue 檔案中的 <template></template>區塊快樂的使用bootstrap5了。
解決方案2：帥氣的用
npm install --save bootstrap
這個我想很簡單吧？但是要注意的一點是，bootstrap5 雖然不用 jquery 了，但是還是需要 popper.js 這個第三方套件，所以要用以下指令新增：
npm install bootstrap@next poppoer.js --save接著進入到 /src/main.js 中將bootstrap引入
import 'bootstrap'這樣就好了…..才有鬼。
這時候你會發現 bootstrap 一直沒有被載入，但是觀察原始碼發現，見鬼了，js是有在運作的，可是頁面出不來….恩….
就是這一段讓我研究好久…跟前端太不熟了..
後來我發現….誒？如果版型沒出來，不就是css的問題嗎？
立刻果斷地在 /public/index.html 中加入 bootstrap5 的css CDN連結
然後….就復活了…＠＠
還我的青春ＲＲＲ…
解決方案3 : 不要用 cdn ，我要帥氣的用 scss
但是 link to cdn 總感覺不是這麼帥，因此我找到一個 github repo 研究了一下
連結在這裡：
超級感謝這位大大的!!
研究了半天後，終於發現了…
大大，原來你是在 scss import 了 bootstrap 的 style ＲＲＲＲＲ！
（難怪我弄了半天的 Dependencies 完全沒用…）
總之，發現了就來實作一下。
這次在用 vue create 的時候，要多加入 css pre-processor，然後選 Sass/SCSS(with node-sass) （我是沒試過選 with date-sass，畢竟時間晚了，我家太座在催我睡了…)
然後建立一個 .scss 檔案，其中要就輸入：
@import “node_modules/bootstrap/scss/bootstrap”;最後回到 /src/main.js 中，加入：
import '@/[filename].scss'就可以使用啦～～（撒花）
後記
總之，再花了長時間的磨練下，終於把這個「簡單」的東西弄完了。
在此紀錄一下，以免我又忘了，重新研究會死人的ＸＤ
2021/02/22 更新
今天在實作時，突發奇想，竟然匯入scss就可以了，那我是不是不用額外建一個 scss，只要在 main.js 中 import bootstrap 的 scss 就好了呢？
所以我就實作了:
import 'bootstrap/scss/bootstrap.scss'诶…可以了….
恩..所以癥結真的是沒有匯入 scss 而已 QAQ。
2021/07/13 更新
之前有網友留言說我救了他一個晚上，我只能說，這是我的榮幸！
不過其實不用這麼麻煩～
根本連 scss 都不用裝…
只要在 main.js 中加入：
import 'bootstrap/dist/css/bootstrap.min.css'這樣就好了！
