templates - 如何在 vuejs 中使用 bootstrap 4 主题

Question

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

其中一些要求我们的 Assets 文件夹以非常具体的方式布局，例如:

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 可能并不理想，因为它有自己的样式并且不能轻松地与第 3 方主题一起使用

2) npm install bootstrap jquery popper.js 也不是理想的，因为它会破坏主题的预期文件夹结构，该结构已经作为一个单元完美运行。

我的目标是简单地重用第 3 方主题、它们的样式、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 中包含的任何样式，其中包括第 3 方主题!

希望这对您有所帮助!