how to use bootstrap 4 themes with vuejs

问题:

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/
│   │   ├── ...

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

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

Notes:

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 will also not be ideal, as it will break the themes' expected folder structure which already works perfectly as unit.

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

回答1:

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.

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

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

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

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

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

Hope this helps!