在 VueJS 中集成 Bootstrap 模板



我已经开发了一个 VueJS 网站几个星期,并意识到我的设计技能不足以设计一个合适的登录页面。我遇到了这个令人惊叹的 Bootstrap 开源模板,真的很想使用它。

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

我尝试只是将HTML复制并粘贴到组件中,但是我遇到了CSS和JavaScript的问题。在 Vue JS 中使用引导.css文件是一个好习惯吗?

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

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

乍一看,看起来不是这种情况,因为你想要一些额外的jQuery代码(主题自己的JS( - 目前是用jQuery编写的。

但是,当仔细观察时,主题自己的jQuery脚本非常小。它基本上做三件事:

  • 在各部分之间导航时路由页面 URL(在您的情况下,可以/应该替换为 Vue 路由器调用(,
  • 实现 scrollSpy(它有一个 Vue 替代方案( - 它这样做的目的相同 - 知道何时更改页面 URL,
  • 实现 magnificPopup(它还有一个 Vue 替代方案(。

所以看起来jQuery依赖可以很容易地删除,只要它被Vue代码取代。

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

如果我们要为这份工作寻找最佳候选人,它可能会在 Vue 或 BootstrapVue 专家以及 Bootstrap 主题的创建者池中找到(考虑到他们模板的质量,他们很可能不应该发现 BootstrapVue 难以使用(。

这是否适合你的能力是一个只有你能回答的问题,但除非你纯粹对功能部分感兴趣(完成工作[1](,否则这绝对是了解更多关于 Vue 和 Bootstrap 的好机会。
为了提供一个有用的估计,一个高级 FE 开发人员需要 8 到 20 个小时来创建这个模板,前提是他们知道 Vue。


[1] 以最少的努力完成工作意味着简单地将整个模板作为一个页面注入到你现有的 Vue 应用程序中,确保你导入它需要的一切(jQuery、jQuery.easing、Bootstrap、magnificPopup 和 scrollSpy( - 粗略估计为 ~4 小时 - 可能会更少,但你必须考虑测试和任何潜在的错误修复。

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


由于 SO 问题应该不会超过 15 分钟来回答,因此很明显,上述任务中没有一个是可行的,作为堆栈溢出问题。此外,到目前为止,您需要展示自己的一些编码工作,并提供一个最小的可重现示例。

最新更新