【Vue】引用 bootstrap 5 不再依賴 JQuery ｜專案實作

轉職前端遇到的1000個問題 vue學習筆記

7514 2021-12-08 23:01:43 ‧ 1745 瀏覽

分享至

npm 引用 bootstrap

$ npm install bootstrap

CDN 引用 bootstrap

不需要載入 JQuery 函式庫，減少載入的資源和容量

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

CDN 屬性補充

integrity
Subresource Integrity(SRI)是允許瀏覽器檢查載入的 script 是否經過第三方竄改，提升安全性。

<script integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"></script>

crossrigin
anonymous：此元素的 CORS 請求將不設置任何標誌。

<script crossorigin="anonymous"></script>

關鍵字	描述
anonymous	此元素的 CORS 請求將不設置任何標誌。
use-credentials	這元素的CORS請求將設置證書標誌；這表明請求將提供正確的信息。
""	設置一個空的值，如crossorigin或crossorigin=""，和設置anonymous的效果一樣。