如何在vuejs中使用bootstrap 4主题 [英] how to use bootstrap 4 themes with vuejs

问题描述

有几个Bootstrap 4主题可以简化网站的样式和布局.

There are several Bootstrap 4 themes that make styling and laying out a website easy.

其中一些要求我们的资产文件夹以非常特定的方式进行布局，例如:

Some of these require that our assets folders be layed out in very specific ways, for example:

https://htmlstream.com/public/preview/stream-ui-kit/docs.html

root-folder/
├── assets/
│   ├── css/
│   │   ├── styles.css
│   │   ├── min.styles.css
│   ├── img/
│   │   ├── ...
│   ├── img-temp/
│   │   ├── ...
│   ├── include/
│   │   ├── scss/
│   │   │   ├── ...
│   ├── js/
│   │   ├── global.js
│   │   ├── ...
│   ├── vendor/
│   │   ├── bootstrap/
│   │   ├── chartist-js/
│   │   ├── ...

在普通的css/js/html网站上，此设置非常有效.

On a plain css/js/html site this setup works perfectly well.

我们如何将这样的预制模板集成到vue.js工作流程中?

How may we integrate such pre-made templates into a vue.js workflow?

注释:

1)使用bootstrap-vue可能不是理想的选择，因为它具有自己的样式，并且无法轻松地与第三方主题配合使用

1) using bootstrap-vue might not be ideal, as it has it's own styling and will not work easily with 3rd party themes

2) npm install bootstrap jquery popper.js 也不理想，因为它将破坏主题的预期文件夹结构，该文件夹结构已经可以完美地工作了.

2) npm install bootstrap jquery popper.js will also not be ideal, as it will break the themes' expected folder structure which already works perfectly as unit.

我的目标是简单地重用第三方主题，其样式，html代码段等，同时使用vue.js扩展网站的某些部分

My objective is to simply reuse the 3rd party theme(s), their styles, html snippets, etc, while augmenting parts of the site with vue.js

推荐答案

以我的拙见，Vue最好的部分是您可以将它作为< script> index.html 和魔术，您将拥有大部分(如果不是全部)功能.

The best part of Vue, in my humble opinion, is that you can just include it as a <script> in your index.html and magic, you have most( if not all ) of it's capabilities.

因此，通常，我将其添加到我的入口点 html :

So, typically, i add this to my entrypoint html:

<script src="js/vue.js"></script>
<script src="js/index.js"></script>

很明显， js/vue.js 是Vue编译的，您可以像所有人一样从cdn包含它.

Obviously, js/vue.js is Vue compiled, you can include it from a cdn like everyone.

然后在我的 index.js 中创建我的Vue实例以及我需要的任何组件.

And then in my index.js i create my Vue instance, and any component i need.

通过这种方式，您可以访问 index.html 中包含的任何样式，其中包括第三方主题！

This way you can have access to any styles you have include in your index.html, which include 3rd party theme(s)!

希望这会有所帮助！

这篇关于如何在vuejs中使用bootstrap 4主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！