引导vue样式设置应用不正确

我很难让bootstrap vue工作。查看从boostrap-vue.js.org复制和粘贴导航栏组件时发生的情况。零碎的东西不见了,我不明白为什么。当我创建b链接时,我可以创建工作的路由器链接,但它们没有样式。主按钮看起来没问题,但通常按钮看起来不正确,收音机不可见。基本上有些事情不对。

boostrap vue navbar example

vue navbar screenshot

包.json

  "dependencies": {
      "bootstrap": "^4.0.0-alpha.6",
      "bootstrap-vue": "^2.0.0-rc.11",
      "vue": "^2.5.17",
      "vue-router": "^3.0.1",
      "vuex": "^3.0.1"
   },
    "devDependencies": {
      "@babel/core": "^7.1.0",
      "@fortawesome/fontawesome-free": "^5.3.1",
      "@vue/cli-plugin-babel": "^3.0.3",
      "@vue/cli-plugin-eslint": "^3.0.3",
      "@vue/cli-service": "^3.0.3",
      "node-sass": "^4.9.3",
      "sass-loader": "^7.1.0",
      "vue-template-compiler": "^2.5.17"

主.js

 import Vue from 'vue';
 import BootstrapVue from 'bootstrap-vue';
 import App from './App.vue';
 import router from './router';
 import store from './store';
 import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';

 Vue.use(BootstrapVue);

 Vue.config.productionTip = false

 new Vue({
    router,
   store,
   render: h => h(App)
  }).$mount('#app')