框架布局

本章只介绍基础布局，和一些主要的js，页面上基本上都是些交互事件，项目代码上都有注释，不懂的地方debug跑一变就知道了，只是这些事件基本上没有独立存在的，相互之间都有关联

框架风格

新建页面：/src/views/layout/layout.vue

<!-- layout.vue -->
<template><div id="loyout"><el-container><layoutAside></layoutAside><el-container><layoutHeader></layoutHeader><el-main id="elmain"><transition name="main" mode="out-in"><router-view></router-view></transition></el-main><el-footer><Bottom></Bottom></el-footer></el-container></el-container></div>
</template>
复制代码

aside 无限级菜单组件

新建页面：/src/views/layout/aside/aside.vue

<!-- aside.vue -->
<template><div><el-aside id="asideNav"><div class="logo-name"><p v-if="$store.getters.logoShow">XU</p><p v-else>vue-xuAdmin后台模板</p></div><!-- el-menu的属性查看官方文档 --><el-menu :default-active="$route.path" class="el-menu-vertical"@select="selectmenu":collapse="$store.getters.isCollapse"background-color="#03152A"text-color="rgba(255,255,255,.7)"active-text-color="#ffffff":router="$store.getters.uniquerouter":unique-opened="$store.getters.uniquerouter":collapse-transition="true"><!-- 遍历根据权限生成的路由表生成菜单列表 --><template v-for="(item,index) in $store.getters.routers" v-if="!item.hidden"><!-- 检查是否带有alone属性的一级菜单类似“主页”，还有子菜单的个数 --><el-submenu v-if="!item.alone && item.children.length>0" :index="index+''"><template slot="title"><!-- 如果没有设置图标将会采用默认图标‘fa fa-server’ --><i :class="item.iconCls?item.iconCls:[fa,fa-server]"></i><span slot="title">{{ $t(`routeNmae.${item.name}`) }}</span></template><!-- 子菜单组件 --><menu-tree :menuData="item.children"></menu-tree></el-submenu><!-- 一级菜单 --><el-menu-item :index="item.path" v-else><i :class="item.iconCls?item.iconCls:[fa,fa-file]"></i><span slot="title">{{ $t(`routeNmae.${item.name}`) }}</span></el-menu-item></template></el-menu></el-aside></div>
</template>
复制代码

点击菜单

// aside.vue
watch: {// 监听浏览器直接输入路由，将此路由添加到tabnavBox'$route.path': function (val) {this.selectmenu(val)}},// 点击菜单把当前菜单的name和path添加到tabNavBox容器，生成tabNav标签页菜单
selectmenu (key) {// 获取当前权限路由表let router = this.$store.getters.routerslet name = ''// 查找路由的name属性let navTitle = function (path, routerARR) {for (let i = 0; i < routerARR.length; i++) {if (routerARR[i].children.length > 0 || routerARR[i].path === path) {if (routerARR[i].path === path && routerARR[i].children.length < 1) {name = routerARR[i].namebreak}// 递归查找navTitle(path, routerARR[i].children)}}return name}// tabNavBox添加数据this.$store.dispatch('addTab', {title: navTitle(key, router),path: key})}
复制代码

子菜单组件 menu-true

新建页面：/src/views/layout/aside/menuTree.vue

<!-- menuTree.vue -->
<template><div><template v-for="(child,index) in menuData"><el-submenu v-if="child.children.length > 0" :index="child.path"><template slot="title"><i :class="child.iconCls?child.iconCls:[fa,fa-file]"></i><span slot="title">{{ $t(`routeNmae.${child.name}`) }}</span></template><!-- 通过递归 menu-tree 生成无限级菜单 --><menu-tree :menuData="child.children"></menu-tree></el-submenu><el-menu-item v-else :index="child.path"><i :class="child.iconCls?child.iconCls:[fa,fa-file]"></i><span slot="title">{{ $t(`routeNmae.${child.name}`) }}</span></el-menu-item></template></div>
</template>
复制代码

header头部

这里没啥好说的，都是html布局，tabnav接下来说， i18n后面会讲

新建页面：/src/views/layout/header/header.vue

<!-- header.vue -->
<template><div><el-header id="header"><span class="hideAside" @click="collapse"><i class="fa fa-indent fa-lg"></i></span><ul class="personal"><li class="fullScreen" @click="fullScreen"><el-tooltip class="item" effect="dark" content="全屏" placement="bottom"><iclass="fa fa-arrows-alt fa-lg"></i></el-tooltip></li><li><langSelect></langSelect></li><li>{{ $t(`role.${this.$store.getters.info.role}`) }}</li><li><el-dropdown @command="handleCommand"><span class="el-dropdown-link">夏洛克丶旭<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item command="a">{{ $t('userDropdownMenu.basicInfor') }}</el-dropdown-item><el-dropdown-item command="b">{{ $t('userDropdownMenu.changePassword') }}</el-dropdown-item><el-dropdown-item command="logout" divided>{{ $t('userDropdownMenu.logout') }}</el-dropdown-item></el-dropdown-menu></el-dropdown></li><li class="icon"><img :src="avatar"/></li></ul></el-header><!-- tabNav 组件,标签页菜单 --><tabNav></tabNav></div>
</template>
复制代码

tabNav 组件

这里的tabNav标签动画和页面的动画是一样的,都是官方的demo稍微改一下，，只不过页面有mode="out-in"所以动画时间需要快一点

新建页面：/src/views/layout/header/tabNav.vue

<!-- tabNav.vue -->
<template><div><div class="tabnavBox"><transition-group name="list" tag="ul"><!-- tabnavBox 是存储所有tabNav的数据容器，每次点击左侧菜单就会把数据添加到tabnavBox --><li v-for="(item, index) in $store.getters.tabnavBox" @contextmenu.prevent="openMenu(item,$event,index)":key="item.title" class="tabnav" :class="{ active: $route.path === item.path }"><router-link :to="item.path">{{ $t(`routeNmae.${item.title}`) }}</router-link><i @click="removeTab(item)" class="el-icon-error" v-if="index !== 0"></i></li></transition-group></div><!-- 右击菜单 --><ul v-show="this.rightMenuShow" :style="{left:this.left+'px',top:this.top+'px'}" class="menuBox"><li @click="removeTab($store.getters.rightNav)"><i class="fa fa-remove"></i>{{ $t('rightMenu.close') }}</li><li @click="removeOtherTab($store.getters.rightNav)">{{ $t('rightMenu.closeOther') }}</li><li @click="removeAllTab">{{ $t('rightMenu.closeAll') }}</li></ul></div>
</template>
复制代码

系列文章

Vue2.0 + ElementUI 手写权限管理系统后台模板（一）——简述

Vue2.0 + ElementUI 手写权限管理系统后台模板（二）——权限管理

Vue2.0 + ElementUI 手写权限管理系统后台模板（三）——页面搭建

Vue2.0 + ElementUI 手写权限管理系统后台模板（四）——组件结尾