框架布局
本章只介绍基础布局，和一些主要的js，页面上基本上都是些交互事件，项目代码上都有注释，不懂的地方debug跑一变就知道了，只是这些事件基本上没有独立存在的，相互之间都有关联
框架风格
新建页面：/src/views/layout/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
<template>
<div>
<el-aside id="asideNav">
<div class="logo-name">
<p v-if="$store.getters.logoShow">XUp>
<p v-else>vue-xuAdmin后台模板p>
div>
<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">
<el-submenu v-if="!item.alone && item.children.length>0" :index="index+''">
<template slot="title">
<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.routers
let 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].name
break
}
// 递归查找
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
<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 :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
<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"><i
class="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>
div>
template>
复制代码tabNav 组件
这里的tabNav标签动画和页面的动画是一样的,都是官方的demo稍微改一下，，只不过页面有mode="out-in"所以动画时间需要快一点
新建页面：/src/views/layout/header/tabNav.vue
<template>
<div>
<div class="tabnavBox">
<transition-group name="list" tag="ul">
<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 手写权限管理系统后台模板（四）——组件结尾