手摸手，带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)基于这篇文章的学习，开始动手写了一个简易的vue管理后台。主要页面如下登录主页 （页面的结构基本和主页相同。左侧导航栏，右侧上方面包屑导航和用户头像，右侧下方大块空白区域对应的是各路由）项目结构views:各业务组件components:公共组件(面包屑,导航开关等等）api: 请求的js文件icons: svg和相关配置文件（此项目的图标是使用svg-sprite-loader来实现的， 之前写过的相关文章链接permission.js 检查权限其他地方与别的项目结构一致，我就不再赘述了。1.实现页面的结构。（因为除了login等特殊页面外,其他的结构都是一致的。所以可以用Layout组件来承载页面的结构）@/views/Layout/的目录结构如下对应到Layout的各个区域如下图。@/router/index.js 路由器。当点击切换路由时，sidebar和navbar不会改变，只有app-main组件的内容会改变。实现思路:左侧导航栏的路由的component为Layout,再通过router的redirect属性控制显示app-main区域的路由。部分代码如下@/Layout/Layout.vue<template> <div class=“app-wrapper” :class=“classObj”> <!–导航 –> <sidebar/> <!–面包屑–> <div class=“main-container”> <!– 头部导航 –> <navbar/> <!– 二级路由 –> <app-main/> </div> </div></template><script>import Sidebar from ‘./components/Sidebar’import Navbar from ‘./components/navbar’import AppMain from ‘./components/AppMain’</script>@/Layou/components/AppMain.vue<template> <section class=“app-main”> <transition name=“fade-transform” mode=“out-in”> <!– 在这里映射不同的路由到Layout中的app-main –> <router-view/> </transition> </section></template>2.左侧导航左侧的导航是通过element-ui的 el-menu组件和循环路由表来实现的。具体效果如下图如果没有子路由，点击直接跳转。有则出现下拉弹框。3.面包屑导航使用的也是element-ui里的el-breadcrumb组件…..未完待续…..