如何在 Vue 组件中使用 Bootstrap？

Posted 2023-02-22

【中文标题】如何在 Vue 组件中使用 Bootstrap？

【英文标题】：How can I use Bootstrap in Vue components?

【发布时间】：2020-12-17 15:53:41

【问题描述】：

我在这两个地方放了相同的 html（使用 Bootstrap 4.5.2）。

index.html App.vue

在 index.html 中，Bootstrap 样式有效。在 App.vue 中，按钮之间的空间失败。我通过将mr-1 类添加到按钮来解决此问题。将普通 Bootstrap 放入组件时如何避免修复它？

我尝试了什么（结果相同）

在index.html添加官方BootstrapCDN代码

将此添加到main.js 并安装模块

import jQuery from "jquery";
global.jQuery = jQuery;
let Bootstrap = require("bootstrap");
import "bootstrap/dist/css/bootstrap.css";

在 App.vue 的 <style> 部分添加了这个

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css');

莫敏的建议：

将所有内容安装在项目文件夹目录中

npm install bootstrap jquery popper.js

将此添加到main.js: 的顶部

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

【问题讨论】：

您在使用 BootstrapVue 吗？还是你现在想要？ bootstrap-vue.org

没有。不，我可能不得不这样做。我的网站也将使用 Django + Bootstrap。

@DavidSmolinkski 我认为您不一定需要，但我之前使用过 BootstrapVue，我发现它非常有用且易于实现。绝对值得一试:)

我 90% 确定我会使用 Vuetify。它有很多视频教程，我应该学习一个 UI 框架。在我学习代码的 1 或 2 年中，我基本上消除了阅读视频之外的需要。我仍然会尝试让纯 Bootstrap 工作。 Django 模板将具有 Bootstrap。我选择了 Bootstrap，这样我可以有更少的选择、一个普通的网站和更多的教程。

【参考方案1】：

如果您需要 Bootstrap，请使用 BootsrapVue，它会为您完成繁重的工作。 如果您仍然愿意接受其他选择，Vuetifyjs 是一个非常好的框架，可以提供很多东西。

【参考方案2】：

BootstrapVue 是一个不错的选择，但这完全取决于您。人们可以整天推荐其他替代方案（例如 Tailwind Vue）。 BootstrapVue 很好，因为如果您已经熟悉 Bootstrap，那么您将立即熟悉 BootstrapVue。同样，如果它确实对您的目的有用，那就去吧。

我个人喜欢包含您需要的内容的功能。

在此处的 BootstrapVue 文档“单个组件和指令”中了解更多信息：https://bootstrap-vue.org/docs#component-groups-and-directives-as-vue-plugins

【参考方案3】：

添加引导样式和 javascript

在您的项目目录中安装 Bootstrap 及其依赖项。

npm install bootstrap jquery popper.js

如果你不打算使用 Bootstrap 的 JavaScript 而只使用它的样式，不要担心安装 jQuery 或 Popper.js

最后，将这些行添加到project/src/main.js: 的顶部，将其导入主脚本

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

重复一遍，如果您只想要样式而不是 JavaScript 功能，只需删除第一行并仅包含 CSS。

【讨论】：

谢谢。这产生了相同的结果。我将使用 Vuetify。