Element UI手册：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:'服务大厅'}, {name:'/components/Management',navItem:'权限管理'}, {name:'/components/User',navItem:'用户管理'}, {name:'/components/Personnel',navItem:'人员数据'}, {name:'/components/Alarm',navItem:'报警中心'}, ] } }, 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：新页面的内容,我写的比较简单，需要自己写下功能需求所在的代码
<template> <div> 我是权限管理页面 </div> </template> <script> </script> <style> </style>5：效果就可以看了
原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1 90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚，对于博客上面有不会的问题，欢迎加入编程微刊qq群：260352626。
