elementui菜单页配置和组件的简单封装

先上一段需求（可以对照下自己需求是否符合）

1. elementui的导航页的简单封装
2. 有左侧导航条，头部，还有内容部 登录页
   

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12" :offset="6" class="textCenter logoTitle">登录</el-col>
    </el-row>
    <el-row :gutter="20" class="inputBox">
      <el-col :span="6" :offset="9" class="textCenter"><el-input v-model="user" placeholder="请输入用户名"></el-input></el-col>
    </el-row>
    <el-row :gutter="20" class="inputBox">
      <el-col :span="6" :offset="9" class="textCenter"><el-input v-model="password" placeholder="请输入用户名"></el-input></el-col>
    </el-row>
    <el-row :gutter="20" class="btnBox">
      <el-col :span="6" :offset="9" class="textCenter"><el-button type="primary" round @click="submit">登录</el-button></el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      user: '',
      password: ''
    }
  },
  methods: {
    submit () { // 当然还需要写自己的代码逻辑，这就是个‘栗子’
      this.$cookies.set('name', this.user)
    }
  }
}
</script>
<style scoped>
.logo{
  width: 200px;
}
.logoTitle{
  height: 100px;
  line-height: 100px;
  font-size: 60px;
  margin-bottom: 20px;
}
.inputBox{
  height: 60px;
  line-height: 60px;
}
.btnBox button{
  width: 100%;
  margin-top: 40px;
}
</style>

导航页

<template>
  <el-container>
    <el-header>
      <div class="header">
        <div class="header-title">
          <img src='@/assets/img/logo.png' class="logo"/>
        </div>
        <div class="header-user">
          <div class="header-user-title">{{name}}</div>
          <div class="header-user-exit">
            <button class="header-user-exit-btn">退出</button>
          </div>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside width="300px">
        <el-menu :default-active="this.menu" router unique-opened class="el-menu-vertical-demo">
          <el-submenu v-for="item in this.menuList" :index="item.id" :key="item.id">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{item.name}}</span>
            </template>
            <el-menu-item-group v-for="(item1, index1) in item.childrenList" :key="index1">
              <el-menu-item :index="item1.id" @click="selectFn(item1.id)">{{item1.name}}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  data () {
    return {
      menuList: [
        {
          id: 'informationList',
          name: '信息管理',
          icon: 'el-icon-chat-line-round',
          childrenList: [
            {
              id: 'information',
              name: '个人信息'
            },
            {
              id: 'group',
              name: '小组信息'
            },
            {
              id: 'allocation',
              name: '分配小组'
            }
          ]
        },
        {
          id: 'createList',
          name: '问卷管理',
          icon: 'el-icon-tickets',
          childrenList: [
            {
              id: 'createQuestionnaire',
              name: '创建问卷'
            },
            {
              id: 'create',
              name: '问卷管理'
            }
          ]
        },
        {
          id: 'activityList',
          name: '活动管理',
          icon: 'el-icon-s-flag',
          childrenList: [
            {
              id: 'createActivity',
              name: '创建活动'
            },
            {
              id: 'activity',
              name: '活动管理'
            }
          ]
        },
        {
          id: 'taskList',
          name: '任务管理',
          icon: 'el-icon-date',
          childrenList: [
            {
              id: 'task',
              name: '任务管理'
            },
            {
              id: 'taskIssue',
              name: '发布任务'
            },
            {
              id: 'taskExamine',
              name: '审批任务'
            }
          ]
        },
        {
          id: 'feedbackList',
          name: '反馈管理',
          icon: 'el-icon-edit',
          childrenList: [
            {
              id: 'feedback',
              name: '反馈管理'
            },
            {
              id: 'feedbackNew',
              name: '新建反馈'
            }
          ]
        },
        {
          id: 'setList',
          name: '系统管理',
          icon: 'el-icon-set-up',
          childrenList: [
            {
              id: 'account',
              name: '账户管理'
            },
            {
              id: 'role',
              name: '角色设置'
            }
          ]
        }
      ],
      menu: '',
      name: ''
    }
  },
  created () {
    this.menuFn()
  },
  methods: {
    selectFn (id) {
      this.$cookies.set('menu', id)
    },
    menuFn () {
      if (this.$cookies.get('menu')) {
        this.menu = this.$cookies.get('menu')
      } else {
        this.menu = 'information'
      }
    },
    nameFn () {
      if (this.$cookies.get('name')) {
        this.menu = this.$cookies.get('name')
      } else {
        this.menu = 'admin'
      }
    }
  }
}
</script>
<style>
.el-header{
  border-bottom: 1px #d8d8d8 solid;
}
.el-container{
  height :100%;
  width: 100%;
}
.el-aside{
  border-right: 1px #d8d8d8 solid;
  text-align: left;
}
.el-main{
  background-color :#ffffff;
}
.header{
  overflow: hidden;
  height: 60px;
  line-height :60px;
  border-bottom: 1px solid #cccccc;
}
.header-title{
  float: left;
  text-indent: 20px;
}
.header-title img{
  width: 120px;
  vertical-align: middle;
}
.header-user{
  width :150px;
  float :right;
}
.header-user-title{
  float :left;
}
.header-user-exit{
  float :right;
}
.header-user-exit-btn{
  width :60px;
  height :30px;
  font-size: 14px;
  background-color :rgba(0,0,0,0);
  border :1px solid #15D6D6;
  border-radius :4px;
}
.header-user-exit-btn:hover{
  background-color :#ffffff;
  color :#303133;
}
</style>

routerJS

import Vue from 'vue'
import Router from 'vue-router'
import login from '@/views/login'
import home from '@/views/home'
import information from '@/views/information'
import group from '@/views/information/group.vue'
import allocation from '@/views/information/allocation.vue'
import create from '@/views/questionnaire'
import createQuestionnaire from '@/views/questionnaire/create.vue'
import activity from '@/views/activity'
import createActivity from '@/views/activity/create.vue'
import task from '@/views/task'
import taskIssue from '@/views/task/issue.vue'
import taskExamine from '@/views/task/examine.vue'
import feedback from '@/views/feedback'
import feedbackNew from '@/views/feedback/feedbackNew.vue'
import account from '@/views/set/account.vue'
import role from '@/views/set/role.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: '登录',
      component: login
    },
    {
      path: '/home',
      name: '菜单',
      component: home,
      redirect: 'information',
      children: [
        {
          path: '/information',
          name: '个人信息',
          component: information
        },
        {
          path: '/group',
          name: '小组信息',
          component: group
        },
        {
          path: '/allocation',
          name: '分配小组',
          component: allocation
        },
        {
          path: '/createQuestionnaire',
          name: '创建问卷',
          component: createQuestionnaire
        },
        {
          path: '/create',
          name: '问卷管理',
          component: create
        },
        {
          path: '/createActivity',
          name: '创建活动',
          component: createActivity
        },
        {
          path: '/activity',
          name: '活动管理',
          component: activity
        },
        {
          path: '/task',
          name: '任务管理',
          component: task
        },
        {
          path: '/taskIssue',
          name: '发布任务',
          component: taskIssue
        },
        {
          path: '/taskExamine',
          name: '审批任务',
          component: taskExamine
        },
        {
          path: '/feedback',
          name: '反馈管理',
          component: feedback
        },
        {
          path: '/feedbackNew',
          name: '新建反馈',
          component: feedbackNew
        },
        {
          path: '/account',
          name: '账户管理',
          component: account
        },
        {
          path: '/role',
          name: '角色设置',
          component: role
        }
      ]
    }
  ]
})