Vue.js 2 - 引导程序 4

Question

我正在尝试了解如何将标准 Bootstrap 4 css 与 vue.js 应用程序一起使用。 我使用 vue-cli webpack 设置了一个简单的测试项目，并在标题组件中复制了一个标准的 Bootstrap 导航栏。 它显示但没有链接可见....

添加到 package.json

 "bootstrap": "4.0.0-beta.3",

添加到 ma​​in.js

  import 'bootstrap/dist/css/bootstrap.css'

App.vue

<template>
  <div id="app">
    <myheader></myheader>
    <div class="container">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import myheader from '@/components/Header'
export default {
  name: 'app',
  components: { myheader }
}
</script>

<style>
</style>

Header.vue

<template>
  <header id="myheader">
    <div class="container">
            <nav class="navbar navbar-light bg-faded rounded ">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#containerNavbar" aria-controls="containerNavbar" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Navbar</a>

        <div class="collapse navbar-collapse" id="containerNavbar">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Disabled</a>
            </li>z
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
              <div class="dropdown-menu" aria-labelledby="dropdown04">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
          </ul>
          <form class="form-inline my-2 my-md-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>
    </div>
  </header>
</template>

<script>
import router from '@/router/index'
export default {
  name: 'myheader',
  router
}
</script>

<style>
</style>

**UPDATE**

我用 npm 添加了 jQuery 和 popper.js 并更新了我的 webpack.dev.config

  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jquery: 'jquery',
      'window.jQuery': 'jquery',
     jQuery: 'jquery'
    })
  ]

我还更新了我的 .eslintrc

  globals: {
    "$": true,
    "jQuery": true
   },

现在 Bootstrap 导航栏折叠运行正常，但仍然没有水平链接...

Answer 1

一些 Bootstrap v4 requires a DOM API wrapping library like jQuery to function:

我们的许多组件都需要使用 JavaScript 才能运行。 具体来说，它们需要 jQuery、Popper.js 和我们自己的 JavaScript 插件。将以下 s 放在页面末尾附近， 在结束标签之前，启用它们。 jQuery必须来 首先是 Popper.js，然后是我们的 JavaScript 插件。

我们使用 jQuery 的 slim 构建，但也支持完整版。

Bootstrap v3也是这样：

请注意，所有 JavaScript 插件都需要包含 jQuery， 如入门模板所示。请查阅我们的 bower.json 以查看哪个 支持 jQuery 的版本。

虽然很多 Bootstrap 都可以在没有任何 JavaScript 的情况下使用，但某些组件（如下拉菜单、警报解除和其他横切小部件）需要 JavaScript 提供的额外功能。如果你只是使用网格系统，你可能没有它就可以逃脱。

---

但是，如果您不想显式依赖 jQuery，您可以尝试 Vue Bootstrap，它是一个 Vue 插件，它提供了大部分 Bootstrap 组件并以面向 Vue 的方式包装了 jQuery 所必需的东西。

Answer 2

由于 Bootsrap4 仍处于测试阶段 (3) 我在测试中使用了错误的标准类，我宁愿使用：

 nav class="navbar navbar-dark bg-dark navbar-expand-md">

现在开始运行......