在 VueJS 中集成 Bootstrap 模板

Question

我已经开发 VueJS 网站几个星期了，我意识到我的设计技能不足以设计一个合适的着陆页。我遇到了this stunning Bootstrap open source template，真的很想使用它。

但是，我想坚持使用 VueJS，因为我需要它用于其他一些动态页面。将此模板集成到 VueJS 组件中的最佳方法是什么？它也使用 Bootstrap 和一些 JavaScript。我知道 Vue 框架，例如 BootstrapVue，但它们需要使用其自定义组件（例如 b-nav 或 b-nav-item）重写整个页面。

我曾尝试将 HTML 复制并粘贴到组件中，但随后遇到了 CSS 和 JavaScript 的问题。在 Vue JS 中使用 bootstrap.css 文件是一种好习惯吗？

我不是要求任何人为我做一些无聊的工作，但在我看来，调整这样的模板以使其适合 VueJS 组件总是有一些副作用，我想确保没有最简单的，更优雅和可靠的解决方案。

Answer 1

BootstrapVue 的全部意义在于放弃 Bootstrap 对 jQuery 的依赖。
它只使用了 Bootstrap 的 scss 并且 jQuery 部分被替换为 BV 自己的 JS（通过 Vue 组件提供）。

乍一看，您的情况并非如此，因为您需要一些额外的 jQuery 代码（主题自己的 JS）——目前是用 jQuery 编写的。

但是，当仔细观察时，主题自己的jQuery script 非常小。它基本上做了三件事：

• 在您在部分之间导航时路由页面 URL（在您的情况下可以/应该由 Vue 路由器调用替换），
• 实现了 scrollSpy（它有一个 Vue 替代方案） - 它的目的相同 - 知道何时更改页面 URL，
• 实现 magnificPopup（也有 Vue 替代方案）。

所以看起来 jQuery 依赖项可以很容易地删除，只要它被 Vue 代码替换。

您基本上似乎想要 Bootstrap 主题的 Vue 变体。或者，更准确地说，是它的 BootstrapVue 变体。

如果我们要为该工作寻找最佳候选人，可能会在 Vue 或 BootstrapVue 专家库中的某个地方找到，以及 Bootstrap 主题的创建者（他们可能不应该找到 BootstrapVue难以使用 - 考虑到他们模板的质量）。

这是否适合您的能力是一个只有您可以回答的问题，但除非您纯粹对功能部分感兴趣（完成工作^[1])，这绝对是一个了解 Vue 和 Bootstrap 的好机会。
为了提供有用的估计，如果高级 FE 开发人员了解 Vue，他们将花费 8 到 20 小时来创建此模板。

---

^[1] 以最少的工作量完成工作意味着只需将整个模板作为一个页面注入到您现有的 Vue 应用程序中，确保您导入它需要的所有东西（jQuery、jQuery.easing、Bootstrap、magnificPopup 和 scrollSpy）——大约需要 4 小时——可能会更少，但你必须考虑测试和任何潜在的错误修复。

我强烈建议不要使用这种方法，因为它可能会显着增加您的应用程序的大小，同时降低其可扩展性和灵活性。这种方法会产生没人愿意接触的应用程序，因为随着时间的推移，任何修改都会破坏某些现有功能的可能性会呈指数级增长。

---

由于 SO 问题的回答时间不应超过 15 分钟，因此显然上述任务都不能作为Stack Overflow 问题。此外，您需要展示自己迄今为止的一些编码工作并提供minimal reproducible example。