Element官方文档： https://element.eleme.cn/#/zh-CN.

来看看效果图：

组件的核心思想是：组件递归，简单来说就是在组件中内使用组件本身

一、安装

npm install element-ui -S

二、在main.js里引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

来看看代码：

<template>
  <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#33aef0" text-color="#fff" active-text-color="#ffd04b">
    <el-menu-item :index="item.path" v-for="item in asideMenu" :key="item.path">
      <i :class="'el-icon-' + item.icon"></i>
      <span slot="title">{{ item.lable }}</span>
    </el-menu-item>
    <el-submenu :index="item.path" v-for="(item, index) in hasChildren" :key="index">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>{{ item.lable }}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item :index="subItem.path" v-for="(subItem, subIndex) in item.children" :key="subIndex">{{ subItem.lable }}</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  computed: {
    noChildren() {
      return this.asideMenu.filter(item => !item.children)
    },
    hasChildren() {
      return this.asideMenu.filter(item => item.children)
    }
  },
  data() {
    return {
      asideMenu: [
        {
          path: '/',
          lable: '首页',
          icon: 'home'
        },
        {
          path: '/video',
          lable: '视频管理',
          icon: 'video-play'
        },
        {
          path: '/user',
          lable: '用户管理',
          icon: 'user'
        },
        {
          lable: '其他',
          icon: 'location',
          children: [
            {
              path: 'page1',
              lable: '页面1',
              icon: 'setting'
            },
            {
              path: 'page2',
              lable: '页面2',
              icon: 'setting'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.el-menu {
  height: 100%;
}
</style>

注意：
（1）asideMenu用计算属性的方式来判断到底有没有子菜单栏（children），如果有，返回这个菜单；如果没有，不返回这个菜单

（2）为什么v-for和v-if不搭配一起使用呢？
其实也是可以一起使用的，只是比较影响性能，vue会发出一个警告，因为一起使用的话会默认渲染全部的标签和数据，然后再进行筛选，这样就比较消耗性能，所以使用计算属性的方式来进行过滤，这样它只会遍历需要的部分，比较节省性能的开销