在 Vue 中正确使用 Bootstrap 5
本文将介绍如何在 Vue 应用中使用 Bootstrap。由于 Bootstrap 5 不再支持 jQuery，我们可以直接使用它，而无需像 bootstrap-vue 这样的 UI 框架。首先，我们将加载 Bootstrap 样式，然后使用 Bootstrap 模态框来了解 Bootstrap JavaScript 的实际工作原理。
使用 Vitejs 安装 Vue
首先，我们使用 ViteJS 安装 Vue 应用。您可以使用 Vue CLI，但在这里这并不重要。要安装 ViteJS 应用，请运行以下命令：
npm init @vitejs/app
同时，系统会询问项目名称和应用程序模板。模板请选择 Vue。然后进入项目目录，安装依赖项并运行 ViteJS 服务器。
安装 Bootstrap 5
现在 Vue 应用已经安装完毕，接下来我们需要安装 Bootstrap 和 Sass 来编译 SCSS 文件。运行以下命令：
npm install bootstrap@next
npm install -D sass
现在我们可以加载 Bootstrap 样式了。在 main.js 文件中，我们可以轻松地加载 bootstrap.scss，如下所示：
import 'bootstrap/scss/bootstrap.scss'
如果我们使用 Bootstrap 类作为例如按钮类，<button class="btn btn-primary">test</button>我们将看到样式被应用。
使用 Bootstrap 模态框
除了样式之外，Bootstrap 还提供了一些 JavaScript 代码，让我们的开发更加便捷，模态框就是一个简单的例子。我们将使用 Bootstrap 文档中的模态框示例。你可以在任何组件模板中使用它。
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
这里有两个部分：一个是显示模态框的按钮，另一个是模态框本身。如果我们只加载样式，什么都不起作用，为什么呢？因为我们只加载了样式，而没有加载 Bootstrap JavaScript。所以我们也需要加载 Bootstrap JavaScript。这样import { Modal } from 'bootstrap'我们就可以只加载 Bootstrap 模态框的 JavaScript 部分，太棒了！但是我们会收到一个错误提示，说@popperjs/core包未安装。让我们用这个简单的命令来安装它：
npm i @popperjs/core
Bootstrap 需要这个包来实现 JavaScript 部分。现在模态框应该可以正常工作了。不错 :) 但是我们还没有使用 Vue vDOM 来实现这个模态框，让我们用 vDOM 来实现吧。
使用虚拟域
Vue 和 React 使用虚拟 DOM，因此我们通常会在这些框架中使用 state。但是，当我们需要使用 DOM 元素而不是 state 时，例如当我们需要聚焦输入框时，我们应该使用refs。使用 Bootstrap JavaScript 有两种方法：一种是使用 data-bs，另一种是直接使用 JavaScript。第二种方法可以使用 refs 来实现模态框的功能。Bootstrap 文档中提到可以这样使用：
var myModal = new Modal(document.getElementById('exampleModal'), options)
Modal 是我们之前导入的组件。我们可以document.getElementById('exampleModal')用我们自己的 ref 替换它，并将我们的 ref 命名为 exampleModal。我们需要一个状态来控制模态框的显示和隐藏。
data: () => ({
modal: null
}),
mounted() {
this.modal = new Modal(this.$refs.exampleModal)
}
我们可以使用hidemodal.show()方法显示模态框，要隐藏模态框，只需使用 hide 方法即可。显示模态框的按钮如下所示：
<button type="button" class="btn btn-primary" @click="modal.show()">
Launch demo modal
</button>
现在我们使用 vDOM 来实现 Bootstrap 模态框。干得好 :)) 整个简单的组件看起来会是这样：
<template>
<button type="button" class="btn btn-primary" @click="modal.show()">
Launch demo modal
</button>
<div class="modal fade" ref="exampleModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" @click="modal.hide()" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" @click="modal.hide()">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</template>
<script>
import { Modal } from 'bootstrap'
export default {
name: "App",
data: () => ({
modal: null
}),
mounted() {
this.modal = new Modal(this.$refs.exampleModal)
}
};
</script>
概括
我们创建了一个基于 Vue.js 的 Vue 应用，并安装了 Bootstrap。之后，我们用简单的方法使用了带有 data-bs 的 Bootstrap 模态框，但之后我们采用了更规范的 Vue.js vDOM 方法。希望这篇短文对大家有所帮助。我在课程中讲解过这些内容，并分享了我在这方面的一些知识。
文章来源：https://dev.to/tefoh/use-bootstrap-5-in-vue- Correctly-2k2g