【Vue】引用 bootstrap 5 不再依赖 JQuery ｜专案实作

npm 引用 bootstrap

$ npm install bootstrap

CDN 引用 bootstrap

不需要载入 JQuery 函式库，减少载入的资源和容量

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

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

参考来源：
https://getbootstrap.com/docs/5.1/getting-started/introduction/
https://developer.mozilla.org/zh-CN/docs/Web/Security/Subresource_Integrity
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/crossorigin