1、使用的是vue-cli 3.0起的

2、文件目录结构

3、整体的骨架是根据element 文档里头的Container容器布局来的（复制粘贴，喜欢什么色儿就改）

aside这个 部分需要注意的是这边的变化是根据路由的增加而增加。根据路由里面meta属性（路由部分）这里需要注意的是每一个顶级路由引入的都是layout.vue这个布局  在 container 里面写内容需要写一个router-view接受（下面再说）

这个地方圈错了  ，到时候打印一下就知道了。很简单的

圈起来的 的就是书写内容的地方（上面的说的加 router-view）

header部分加了element的面包屑也是根据路由中的meta来的  上面 有地方圈错了

大概的骨架就搭好了

vue+Element 后台管理骨架的更多相关文章

  1. Vue + ElementUI 后台管理模板推荐

    最近学习和项目都用到了Vue和ElementUI,自己不是专业前端,搞这些UI上的东西还是有些难度,这里推荐两个Vue + ElementUI后台管理模板 vue-element-admin vue- ...

  2. Vue Admin - 基于 Vue & Bulma 后台管理面板

    Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组 ...

  3. 手摸手，带你用vue实现后台管理权限系统及顶栏三级菜单显示

    手摸手,带你用vue实现后台管理权限系统及顶栏三级菜单显示 效果演示地址 项目demo展示 重要功能总结 权限功能的实现 权限路由思路: 根据用户登录的roles信息与路由中配置的roles信息进行比 ...

  4. 换个思维，boot结合vue做后台管理

    可以添加,可以删除.动态的添加数据. 不用操作dom,只要操作json数据即可. <form class="form-horizontal addForm" id=" ...

  5. 项目：Vue+node+后台管理项目小结

    序:本文主要分两块说:项目机制,具体用到的知识块. 1. 项目机制 项目的原型以vue-cli为原型,进行项目的初步构建.项目以node.js服务和webpack打包机制为依托,将.vue文件打包为浏 ...

  6. vue搭建后台管理页面（点击左侧导航，切换右侧内容）

    home.vue页面 <template> <div style="background-color: #EBEBEB;min-height:900px"> ...

  7. Vue Admin 后台管理

    https://segmentfault.com/a/1190000009188689

  8. vue+elementui后台管理快捷代码片段

    Form <el-form labelPosition="right" labelWidth="10%" size="small" : ...

  9. 循序渐进VUE+Element 前端应用开发(16）--- 组织机构和角色管理模块的处理

    在前面随笔<循序渐进VUE+Element 前端应用开发(15)--- 用户管理模块的处理>中介绍了用户管理模块的内容,包括用户列表的展示,各种查看.编辑.新增对话框的界面处理和后台数据处 ...

随机推荐

  1. SOFT-NMS (二) （non maximum suppression，非极大值抑制）

    import numpy as np boxes = np.array([[200, 200, 400, 400], [220, 220, 420, 420], [200, 240, 400, 440 ...

  2. centos7配置nfs共享存储服务

    nfs 是一种网络文件系统,需要依赖rpc进行过程调度 注意nfs只验证id,验证用户名,并且只能在类unix os上进行文件共享服务,由于它的脆弱的验证机制,所以不适宜在internet上工作,在内 ...

  3. JavaScript实现网页回到顶部效果

    在浏览网页时,当我们浏览到网页底部,想要立刻回到网页顶部时,这时候一般网页会提供一个回到顶部的按钮来提升用户体验,以下代码实现了该功能 HTML代码: <p id="back-top& ...

  4. PHP7中方法的弃用

    php7与数据库连接创建函数方法调用: function fun_conn($sql) { $con = mysqli_connect("localhost", "roo ...

  5. Java虚拟机如何运行Java字节码

    一.Java的class文件的内容 1.首先编写一个简单的代码 public class StringDemo { public static void main(String[] args) { S ...

  6. 介绍一个免费的云开发工具：Cloud Shell

    上周和一德国同事吹牛的时候,他说最近业余时间在玩一个东东,叫做Cloud Shell,Google出品.Jerry之前听说过国内的阿里云也提供过类似的解决方案,即在云端提供一个受限制的Linux环境并 ...

  7. FIneUICore 版本的 AppBoxMvcCore

    http://www.51aspx.com/code/codename/64088 CORE版本的APPBOXMVC欢迎下载

  8. github hooks 配置教程 钩子搭建（实测通过，手把手教程）

    tips:如果本文对你有用,请爱心点个赞,提高排名,让这篇文章帮助更多的人.谢谢大家!❤ 本人hooks搭建成功,全程参考JellyBool老师的视频教程,有不懂的可以先去看下这个视频,跟着操作.本文 ...

  9. Jmeter配置元件

    1.CSV Data Set Config Filename   参数化文件的路径 文件中的数据最后一行不能有空行,空行会被当做一个参数 若要进行分布式压测,可以将参数化文件放在jmeter的bin目 ...

  10. Linux操作系统-CentOS6启动流程和服务管理

    Linux操作系统-CentOS6启动流程和服务管理 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Linux组成 1>.Linux: kernel+rootfs ker ...