Как использовать темы начальной загрузки 4 с Vuejs

Question

Существует несколько тем Bootstrap 4, которые упрощают стилизацию и разметку веб-сайта.

В некоторых из них требуется, чтобы папки с активами были размещены очень специфическим образом, например:

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 эта настройка работает превосходно.

Как мы можем интегрировать такие готовые шаблоны в рабочий процесс vue.js?

Примечания:

1) использование bootstrap-vue может быть не идеальным, поскольку оно имеет собственный стиль и не будет легко работать со сторонними темами

2) npm install bootstrap jquery popper.js также не будет идеальным, поскольку нарушит ожидаемую структуру папок тем, которая уже отлично работает как единое целое.

Моя цель состоит в том, чтобы просто повторно использовать стороннюю тему (ы), их стили, фрагменты HTML и т. Д., Дополняя при этом части сайта с помощью vue.js

Answer 1

Лучшая часть Vue, по моему скромному мнению, заключается в том, что вы можете просто включить его как <script> в свою index.html и магию, у вас есть большинство (если не все) его возможностей.

Итак, обычно я добавляю это к своей точке входа html:

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

Очевидно, js/vue.js компилируется в Vue, вы можете включить его из cdn, как все.

И затем в моем index.js я создаю свой экземпляр Vue и любой нужный мне компонент.

Таким образом, вы можете получить доступ к любым стилям, включенным в index.html, включая сторонние темы.)!

Надеюсь, это поможет!