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中包含的任何样式，其中包括第三方主题！

希望这会有所帮助！

如何在vuejs中使用bootstrap 4主题

1 个答案: