Vue cli 專案 npm 載入 Bootstrap CSS、JS (筆記)

目錄 :
一、Bootstrap 的 CDN
二、使用 CDN 載入
三、使用 npm 指令載入
四、客製化 Bootstrap 變數檔案載入

一、Bootstrap 的 CDN

官方文件

分為 CSS 以及 JS

CSS:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

JS:

• jQuery
• popper
• bootstrap JS

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

二、使用 CDN 載入

若要使用 CDN 的方式，載入的位置在專案中 public/index.html ，貼上 CDN 就可以開始使用。

三、使用 npm 指令載入

CSS :

1. 終端機輸入指令
   npm install bootstrap --save
2. 在 App.vue 的 <style> 中匯入

// Appp.vue 
<style lang="scss">
  @import '~bootstrap/scss/bootstrap';  
</style>

如果跳錯可以試試以下步驟，把 sass loader 加進來 :

• 終端機 ctrl+c 停止 vue cli
• 輸入 npm install node-sass sass-loader --save
• npm run dev 重啟 vue cli

JS :

jQuery

全域載入 :

1. 終端機下指令npm i -S jquery
2. 在 main.js 中匯入

// main.js
import $ from 'jquery';
window.$ = $;

3. 此時若在分頁中使用 jQuery 依然會跳錯，需要再補上一段註解
/* global $ */，表示全域已經註冊 jQuery 了，區域不用再註冊一次。

// Products.vue
<script>
/* global $ */
exprot default {
}
</script>

popper

終端機下指令 npm install --save popper.js

Bootstrap JS

在 main.js 中加上以下這段匯入即可

// main.js
import 'bootstrap';

四、客製化 Bootstrap 變數檔案載入

1. 依照上一個「三、使用 npm 指令載入」步驟載入 Bootstrap 後，我們可以在node_modules/ bootstrap/scss/_variables.scss 找到此變數檔案，將它複製一份到 src/assets/helpers 資料夾內，一樣命名為_variables.scss。(helpers 為自己命名、新增的資料夾)
2. 在 src/assets 中新增一個檔案叫 main.scss
3. 在 main.scss import 載入主要的三支 scss 檔案 (參考 Theming 文件)

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

• 因為 variables 要使用我們自己客製化的變數檔案，因此需要修改路徑

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "./helpers/variables'; // 自己的變數檔案
@import "../node_modules/bootstrap/scss/mixins";

4. 如果沒有特定要導入的檔案，接下來就可以將剩下的 bootstrap 用
@import 'bootstrap';一次全部導入

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import '~bootstrap';

5. 在 App.vue 的 <style> 中匯入

• 記得把原本的 @import "~bootstrap/scss/bootstrap" 刪除，改為匯入 assets 中的 main.scss 檔案。

// App.vue
<style lang="scss">
  @import './assets/main';
</stule>

6. 可以開始修改 helpers 內的變數檔案囉~🤓