ElementUI之首页导航+左侧菜单-＞mockjs,总线

ElementUI是一款流行的Vue组件库，用于构建用户界面。Mock.js是一款模拟数据生成器，可以用来模拟Ajax请求返回的数据。总线（Event Bus）是Vue中的一个概念，可以用来非父子组件间的通信。

首先，你需要安装ElementUI和Mockjs：

npm install element-ui mockjs --save

然后，你可以使用Mockjs来模拟API请求返回的数据，并使用ElementUI的组件来展示这些数据。

以下是一个简单的例子，展示如何使用Mockjs和总线来模拟导航菜单和左侧菜单的数据：

// 引入ElementUI和Mockjs
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Mock from 'mockjs'
 
Vue.use(ElementUI)
 
// 模拟数据
Mock.mock('/api/nav', {
  'nav|5': [{ 'id|+1': 1, 'name': '@ctitle' }] // 生成5个导航项
})
 
Mock.mock('/api/menu', {
  'menu|5': [{ 'id|+1': 1, 'name': '@ctitle', 'parentId|1-5': 1 }] // 生成5个菜单项
})
 
// 创建Vue实例，并使用ElementUI组件
new Vue({
  el: '#app',
  data: {
    navData: [],
    menuData: []
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 发送Ajax请求获取模拟数据
      this.$http.get('/api/nav').then(response => {
        this.navData = response.data;
      });
      this.$http.get('/api/menu').then(response => {
        this.menuData = response.data;
      });
    }
  },
  template: `
    <div>
      <el-menu :data="navData"></el-menu>
      <el-menu :data="menuData"></el-menu>
    </div>
  `
})

在这个例子中，我们使用Mock.js生成了两组模拟数据，一组是导航菜单项，一组是左侧菜单项。然后，我们在Vue实例的created钩子中调用fetchData方法，使用Vue Resource（Vue的一个插件，用于发送Ajax请求）来发送请求，并将返回的数据赋值给Vue实例的数据属性navData和menuData。最后，在模板中使用ElementUI的<el-menu>组件来展示这些数据。

请注意，这只是一个简化的示例，实际应用中你可能需要处理更复杂的逻辑，例如路由、状态管理等。