结合Mockjs与Bus事件总线搭建首页导航和左侧菜单

// 引入Vue及相关组件
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import router from './router'
import store from './store'
 
// 使用Mock.js模拟数据
import Mock from 'mockjs'
import navList from './data/navList.json'
import menuList from './data/menuList.json'
 
// 使用Vue.use安装ElementUI
Vue.use(ElementUI)
 
// 初始化Mock.js，并配置数据
Mock.mock('/navList', 'get', navList)
Mock.mock('/menuList', 'get', menuList)
 
// 创建Vue实例，并挂载
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
 
// 在App.vue组件中，可以这样使用
<template>
  <div id="app">
    <!-- 使用router-link组件进行导航 -->
    <nav-bar></nav-bar>
    <side-menu></side-menu>
    <router-view></router-view>
  </div>
</template>
 
<script>
import NavBar from './components/NavBar.vue'
import SideMenu from './components/SideMenu.vue'
 
export default {
  components: {
    'nav-bar': NavBar,
    'side-menu': SideMenu
  }
}
</script>
 
// 在NavBar.vue组件中，可以这样使用
<template>
  <el-menu :default-active="onRoutes" router>
    <!-- 使用v-for指令循环渲染导航数据 -->
    <el-menu-item v-for="item in navList" :key="item.index" :index="item.path">
      {{ item.title }}
    </el-menu-item>
  </el-menu>
</template>
 
<script>
import { mapState } from 'vuex'
 
export default {
  computed: {
    ...mapState(['navList']),
    onRoutes() {
      return this.$route.path.replace('/', '');
    }
  },
  created() {
    // 在组件创建时，发起获取导航数据的请求
    this.$store.dispatch('getNavList')
  }
}
</script>
 
// 在SideMenu.vue组件中，可以这样使用
<template>
  <el-menu :default-openeds="defaultOpeneds" router>
    <!-- 使用v-for指令循环渲染菜单数据 -->
    <el-submenu v-for="item in menuList" :key="item.index" :index="item.index">
      <template slot="title">{{ item.title }}</template>
      <el-menu-item v-for="subItem in item.children" :key="subItem.index" :index="subItem.path">