如何在没有 bootstrap-vue 的情况下在 vue.js 2 中使用 bootstrap 4？

Question

我正在思考如何将引导程序 4 集成到我的 vue.js 2.6 中。 我知道那里有大量的教程，但它们要么在 2020 年末过时，要么需要使用bootstrap-vue ，它将大量垃圾标签带入我讨厌的表格中。

因此，如果您能提供一个与 vanilla bootstrap 4 集成的实用完整示例，我将不胜感激。

Answer 1

您可以在 vue 项目中使用 vanilla bootstrap。 只需通过运行安装引导程序

npm i bootstrap popper.js jquery

Popper.js 和 jquery 是 bootstrap 的依赖项。 在 main.js 文件中，通过添加以下内容导入引导程序：

import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css"

Answer 2

根据官方Bootstrap 文档，以下组件需要 JQuery、bootstrap.js 和 Popper.js：

解雇提醒

用于切换状态和复选框/收音机功能的按钮

所有幻灯片行为、控件和指示器的轮播

折叠以切换内容的可见性

用于显示和定位的下拉菜单（也需要 Popper）

用于显示、定位和滚动行为的模式

用于扩展我们的 Collapse 插件以实现响应行为的导航栏

用于显示和定位的工具提示和弹出框（也需要 Popper）

用于滚动行为和导航更新的 Scrollspy