在 vuejs 项目中包含 bootstrap 4 的正确方法答案

【问题标题】：Proper way to include bootstrap 4 in a vuejs project在 vuejs 项目中包含 bootstrap 4 的正确方法
【发布时间】：2018-08-27 13:16:08
【问题描述】：

我用vue cli，想用bootstrap 4。我安装了bootstrap npm包，并在App.vue中用@import '../node_modules/bootstrap/scss/bootstrap.scss';导入了样式。

但我无法让用于模态和下拉菜单的 javascript 正常工作。我尝试将这些文件包含在 index.html 中，但没有帮助：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

我不想使用 vue-bootstrap。

【问题讨论】：

如果不想包含 jQuery Bootstrap-vue 很好。尝试不使用 jQuery 是一个好主意，因为你正在使用 vue.js .. 听起来很难，但你赢得了组件并且构建你自己的组件比 jQuery 容易得多。（我知道你已经表示你不想使用 bootstrap vue，但这个建议对我很有帮助..只是想提供帮助）
你说得对，我自己写这个很容易，所以我就是这么做的。

标签： vue.js bootstrap-4

【解决方案1】：

npm install jquery bootstrap popper.js --save

之后，在 main.js 文件中导入 js 和 css。如下所示。希望对你有帮助

import jQuery from 'jquery'
import bootstrap from 'bootstrap'

import 'bootstrap/dist/css/bootstrap.css'
global.jQuery = jQuery
global .$ = jQuery

【讨论】：