Bootstrap-Vue.JS 未知自定义元素 <b-nav-brand>

Question

我正在开发一个 Vue 应用程序。我在我的应用程序中使用来自 this official example 的 bootstrap-vue 导航栏。但是，当我运行我的项目时，在控制台中，Vue 不断警告我有关我在 main.js.

中包含的未知自定义元素 <b-nav-brand>

如果您有任何想法，这是我的设置。

错误：

[Vue warn]: Unknown custom element: - did you register
the component correctly? For recursive components, make sure to provide
enter code here enter code here the "name" option.

导航栏代码：

<b-navbar class="nav-bar" toggleable="sm">
    <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
    <b-nav-brand class="logo" href="#">
      <img src="/static/images/boost-icon.svg" alt="Boost icon"/>
      <h1>Portal</h1>
    </b-nav-brand>
    <b-collapse is-nav id="nav_collapse">
      <b-navbar-nav class="ml-auto">
        <b-nav-item href="">
          <span class="btn btn-primary btn-request-access">Request Access</span>
        </b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>

Main.JS:

Vue.use(BootstrapVue)
new Vue({
  el: '#app',
  router: router,
  template: '<App/>',
  store: store,
  components: {
    App
  }
})

Answer 1

因为它的 <b-navbar-brand> 在 docs.

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div>
  <!-- Image and text -->
  <b-navbar variant="faded" type="light">
    <b-navbar-brand href="#">
      <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="BV">
      BootstrapVue
    </b-navbar-brand>
  </b-navbar>
</div>

Answer 2

也可以导入

import { BNavbar } from 'bootstrap-vue'
Vue.component('b-navbar', BNavbar)

或

import { NavbarPlugin } from 'bootstrap-vue'
Vue.use(NavbarPlugin)

在 bootstrap-vue 文档中，他们喜欢在页面底部告诉您如何开始、导入。

Bootstrap-Vue.JS 未知自定义元素 <b-nav-brand>

Bootstrap-Vue.JS Unknown Custom Element <b-nav-brand>

vue.js

bootstrap-vue