PHP前端开发

vue怎样引入bootstrap

百变鹏仔 3周前 (09-25) #VUE
文章标签 vue
在 vue 中引入 bootstrap 的两种方式:使用 cdn:在 html 头部添加 css 链接,bootstrap 将自动应用于所有组件。使用 npm:安装 bootstrap 包,然后在 vue 文件中使用 import 语句导入 bootstrap 和 jquery。

如何在 Vue 中引入 Bootstrap

在 Vue 中引入 Bootstrap 有两种主要方式:

方式一:使用 CDN

  1. 在 HTML 头部中添加以下链接:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  1. Bootstrap 会自动应用于所有组件。

方式二:使用 npm

立即学习“前端免费学习笔记(深入)”;

  1. 使用 npm 安装 Bootstrap 包:
npm install bootstrap
  1. 在 Vue 文件中,使用 import 语句导入 Bootstrap:
import 'bootstrap';
  1. 由于 Bootstrap 依赖于 jQuery,还需要在 Vue 文件中导入 jQuery:
import 'jquery';

详细展开

注意: