在Vue透過cli建立的專案中使用Bootstrap主要有兩種方式，一種是直接引用CDN，另外一種是透過NPM的方式安裝在本地端

1.直接引用CDN

找到專案中public/index.html，直接在head裡面引用就行了

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

2.透過npm安裝

安裝bootstrap 與 jQuery

這邊是透過Vue UI來安裝的，沒辦法…Vue UI真的很好用哈哈

直接在Vue UI中的 Dependencies 頁面中，點擊右上角的 install dependencies，依序搜尋bootstrap與他的相依套件jQuery、popper.js

在專案中引用bootstrap

在專案中的main.js加入

1	import "bootstrap";

在app.vue的style 引入 bootstrap的css

1
2
3

<style>
@import "bootstrap/scss/bootstrap";
</style>

客製化bootstrap

打開專案中的node_modules/bootstrap/scss/_variables.scss，這個檔案主要是存儲bootstrap的基本設定值，打開後將其另存新檔到asset/hepler中，未來要修改參數直接在這邊修改就好了

接著在asset中新增一個all.scss

1
2
3

@import "~bootstrap/scss/_functions";  
@import "./helpers/variables";
@import "~bootstrap/scss/bootstrap";

在需要用到bootstrap地方引入all.scss，或者是直接在app.vue中引用

1
2
3

<style>
@import "./assets/all";
</style>

在專案中使用jQuery

例如這次要在home.vue中使用jQuery，就直接在script裡面import jQuery就好，之後就直接用$來呼叫jquery並進行操作

1
2
3

<script>
import $ from 'jquery'
</script>

新增 Bootstrap 4 到用 vue-cli 3.x 建立的專案中
 這次說說如何在vue-cli 3.x中使用jquery
Vue CLI3.0 中使用jQuery 和 Bootstrap
Adding Bootstrap to a Vue CLI Project