替自己有用到的地方做個紀錄。
首先先導入，參考官網連結 https://bootstrap-vue.org/docs ，結合
Bootstrap 跟 Vue.js 的套件，
雖然不用 jQuery 的好處還不明顯，但在六角的課程都學了 Bootstrap 跟 Vue.js
就學一下。
在 VSCode中，用快捷鍵 Ctrl + ` 叫出終端機，在專案資料夾底下輸入：
npm install vue bootstrap-vue bootstrap
然後就裝完了，接著在 Vue 的專案裡面 main.js 裡面作 import
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
通常上面那行會有，下面就是 import 剛剛安裝的 BootstrapVue，後面是附的
Icon，可加可不加。
Vue裡面的套件需要先use，不然會報錯，所以加入下面兩行，Icon一樣可有可無：
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
CSS 方法是用 SCSS，容後再提。
這個套件我覺得最大的優勢是元件不太需要大改就有蠻完整的功能，這邊介紹兩個我有用到的：
Form select 跟 Form spinbutton。
Form select
在官網的文件中提供的範例：
可以看到，簡單的使用 v-model 同步選項的 value 以方便送出表單，並且可以在 data 中設定預設值 value， 如：(多餘的code省略)
透過預設值的方法可以提升使用者體驗。
Form spinbutton
就是可以按箭頭跳數字的功能，下面是我複製貼上改的，自己乖乖寫要寫：減號按鈕、顯示值、加號按鈕，三個東西，但是這個套件複製貼上一行搞定。
我寫的內容如下：
抄回來之後可以看到可以對數量作 v-model
的即時更新，可以限制中間數字欄的最大最小值，並且一樣可以透過 v-model
設定預設值，
@change是我需要把按過按鈕更新過的數量立刻更新 API 上的資料。
最後要補充一個地方，這個東西的寬度預設是 width:100%
，但是可以自動變大變小，如果要手動調整大小，要用 HTML 標籤包起來作調整。
如：
col-8 是 Bootstrap 中， CSS 的格線系統，寬度大約等於所在位置寬度的
8/12，當然也可以選擇固定值或其他。
