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

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的效果一样。

参考来源：
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