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

问题描述

我用默认设置创建了一个新的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");

我只是指出所有其他组件都工作正常。使用侧边栏组件还需要做些其他事情吗？还有其他人有类似的问题吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）