Element UI手冊(cè)：https://cloud.tencent.com/developer/doc/1270
中文文檔：http://element-cn.eleme.io/#/zh-CN
github地址：https://github.com/ElemeFE/element

1：components
新建頁面

2：打開app.vue
寫代碼

<template>
  <div>
   <el-col :span="2">   
    <el-menu
      :default-active="this.$route.path" 
      router mode="horizontal"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
        <template slot="title">
          <i class="el-icon-s-platform"></i>
          <span> {{ item.navItem }}</span>
        </template>

      </el-menu-item>
       
        
    </el-menu>
  </el-col>
  
  <router-view     class="menu-right"/>

  </div>
</template>
<script>
  export default {
    data() { 
        return { 
            navList:[ 
            {name:'/components/ServiceHall',navItem:'服務(wù)大廳'}, 
            {name:'/components/Management',navItem:'權(quán)限管理'},
            {name:'/components/User',navItem:'用戶管理'}, 
            {name:'/components/Personnel',navItem:'人員數(shù)據(jù)'}, 
            {name:'/components/Alarm',navItem:'報(bào)警中心'}, 
            ] } 
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style>
    .menu-right{
        margin-left:200px;
    }
    
</style>

3:路由index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import ServiceHall from '@/components/ServiceHall'
import Management from '@/components/Management'
import User from '@/components/User'
import Personnel from '@/components/Personnel'
import Alarm from '@/components/Alarm'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
     {
      path: '/components/ServiceHall',
      name: 'ServiceHall',
      component: ServiceHall
    }, {
      path: '/components/Management',
      name: 'Management',
      component: Management
    },
     {
      path: '/components/User',
      name: 'User',
      component: User
    },{
      path: '/components/Personnel',
      name: 'Personnel',
      component: Personnel
    },{
      path: '/components/Alarm',
      name: 'Alarm',
      component: Alarm
    }
  ]
})

4：新頁面的內(nèi)容,我寫的比較簡單，需要自己寫下功能需求所在的代碼

<template>  
    <div>
    我是權(quán)限管理頁面
    </div>  
</template>
<script>
</script>
<style>
</style>

5：效果就可以看了

原文作者：祈澈姑娘 技術(shù)博客：http://www.itdecent.cn/u/05f416aefbe1
90后前端妹子，愛編程，愛運(yùn)營，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚，對(duì)于博客上面有不會(huì)的問題，歡迎加入編程微刊qq群：260352626。