如何在 vue-cli3 生成的应用程序中使用 vue-sidebar-menu？

Question

我的 vue-cli3 生成的应用程序中需要侧边栏 这是我的 package.json 的一部分

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.15",
    "@fortawesome/free-solid-svg-icons": "^5.7.2",
    "@fortawesome/vue-fontawesome": "^0.1.5",
    "bootstrap": "^4.3.1",
    "bootstrap-vue": "^2.0.0-rc.26",
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vue-sidebar-menu": "^3.11.1"
  },

main.js：

import Vue from 'vue'
import './plugins/fontawesome'
import App from './App.vue'
import router from './router'
import VueSidebarMenu from 'vue-sidebar-menu'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'vue-sidebar-menu/dist/vue-sidebar-menu.css'

Vue.use(BootstrapVue)
Vue.use(VueSidebarMenu)

Vue.config.productionTip = false

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

应用程序.js

<template>
  <div id="app">
    <sidebar-menu :menu="menu" />
    <div class="container float-right">
      <router-view/>
    </div>
  </div>
</template>

结果：

• 侧边栏不显示 fontawesome 图标
• 展开状态下的侧边栏隐藏内容div

我该如何解决这个问题？我可能需要使用另一个侧边栏组件吗？

Answer 1

您好~请按照以下步骤操作：

npm install --save-dev @fortawesome/fontawesome-free

然后在main.js中，导入css和js文件

import '@fortawesome/fontawesome-free/css/all.css';
import '@fortawesome/fontawesome-free/js/all.js';
Vue.use(VueSidebarMenu);

Vue.config.productionTip = false;

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