Bootstrap Vue 侧边栏组件无法正常工作

Question

我使用默认设置创建了一个新的 Vue 项目，然后安装了 Bootstrap、Bootstrap-vue 和 JQuery。我从 Bootstrap-vue 网站复制了一个示例，不幸的是它不起作用。这是打开时的样子：

动画和属性都不起作用（即我无法将它移到右侧）。我的 App.vue 文件：

<template>
  <div>
    <b-button v-b-toggle.sidebar-1>Toggle Sidebar</b-button>
    <b-sidebar id="sidebar-1" title="Sidebar" shadow>
      <div class="px-3 py-2">
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
          dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
          consectetur ac, vestibulum at eros.
        </p>
        <b-img
          src="https://picsum.photos/500/500/?image=54"
          fluid
          thumbnail
        ></b-img>
      </div>
    </b-sidebar>
  </div>
</template>
<script>
export default {
  name: "App",
  components: {},
};
</script>
<style>
</style>

package.json 文件:

{
  "name": "test-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "bootstrap": "^4.5.2",
    "bootstrap-vue": "^2.17.3",
    "core-js": "^3.6.5",
    "jquery": "^3.5.1",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

main.js 文件:

import Vue from "vue";
import App from "./App.vue";
import { BootstrapVue, BootstrapVueIcons } from "bootstrap-vue";
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
Vue.use(BootstrapVueIcons);
new Vue({
  render: (h) => h(App),
}).$mount("#app");

我只想指出所有其他组件都工作正常。要使用侧边栏组件，我还需要做些什么吗？有没有其他人遇到过类似的问题？

Answer 1

侧边栏是BootstrapVue中的自定义组件，因此需要添加BootstrapVue的CSS.

在您的 bootstrap.min.css 导入下添加以下行。

import 'bootstrap-vue/dist/bootstrap-vue.css'

then installed Bootstrap, Bootstrap-vue and JQuery

关于这一行，BootstrapVue 不需要 需要jQuery 才能运行，所以如果您只是因为 BootstrapVue 而安装它，您可以随意删除它。

Answer 2

我遇到了同样的问题并且一切正常，但仍然有同样的问题。我的解决方案是使用以下方法升级我的所有软件包： yarn upgrade --latest

Bootstrap Vue 侧边栏组件无法正常工作

Bootstrap Vue Sidebar component not working properly

javascript

sidebar

vue.js

bootstrap-4

bootstrap-vue