框架布局

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

框架风格

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

aside 无限级菜单组件

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

点击菜单

// aside.vuewatch: {      // 监听浏览器直接输入路由，将此路由添加到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

header头部

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

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

tabNav 组件

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

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