在VueJS中集成Bootstrap模板

时间:2020-01-11 10:41:34

标签: html css twitter-bootstrap vue.js

我已经开发了VueJS网站几周了,意识到我的设计技能不足以设计合适的目标网页。我遇到了this stunning Bootstrap open source template,真的很想使用它。

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

我尝试仅将HTML复制并粘贴到组件中,但是然后出现CSS和JavaScript问题。在Vue JS中使用bootstrap.css文件是一种好习惯吗?

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

1 个答案:

答案 0 :(得分:1)

BootstrapVue的全部目的是放弃Bootstrap对jQuery的依赖。
它仅使用Bootstrap的scss,而jQuery部分则由BV自己的JS(通过Vue组件提供)代替。

乍看之下,情况并非如此,因为您还需要一些其他jQuery代码(主题自己的JS)-当前使用jQuery编写。

但是,当仔细观察时,主题本身的jQuery script很小。它基本上完成了三件事:

  • 在各部分之间导航时路由页面URL(在您的情况下,可以/应由Vue Router调用替换)
  • 实现scrollSpy(具有Vue替代方法)-出于相同的目的进行操作-知道何时更改页面URL,
  • 实现magnificPopup(也具有Vue替代方法)。

因此,如果用Vue代码替换了jQuery依赖项,则可以很容易地删除它。

您基本上似乎想要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