在 vue 中引入 bootstrap 的两种方式:使用 cdn:在 html 头部添加 css 链接,bootstrap 将自动应用于所有组件。使用 npm:安装 bootstrap 包,然后在 vue 文件中使用 import 语句导入 bootstrap 和 jquery。

如何在 Vue 中引入 Bootstrap
在 Vue 中引入 Bootstrap 有两种主要方式:
方式一:使用 CDN
- 在 HTML 头部中添加以下链接:
<code class="html"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"></code>
- Bootstrap 会自动应用于所有组件。
方式二:使用 npm
立即学习“前端免费学习笔记(深入)”;
- 使用
npm安装 Bootstrap 包:
<code class="bash">npm install bootstrap</code>
- 在 Vue 文件中,使用
import语句导入 Bootstrap:
<code class="javascript">import 'bootstrap';</code>
- 由于 Bootstrap 依赖于 jQuery,还需要在 Vue 文件中导入 jQuery:
<code class="javascript">import 'jquery';</code>
详细展开
- CDN 方法:这种方法简单快捷,适合用于快速原型制作或小型项目。
- npm 方法:这种方法更适用于大型项目,因为它允许对 Bootstrap 进行版本控制和定制。
注意:
- Bootstrap 版本 5.2.3 以上使用
npm install bootstrap@5.2.3进行安装。 - 如果使用的是旧版 Bootstrap(5.1.3 及以下),则使用
npm install bootstrap@5.1.3进行安装。










