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. python-pymysql防止sql注入攻击介绍

    目录 pymysql sql 注入攻击 调用存储过程 pymysql pymysql 是一个第三方模块,帮我们封装了 建立表/用户认证/sql的执行/结果的获取 import pymysql # 步骤 ...

  2. Python进阶----表与表之间的关系(一对一,一对多,多对多),增删改查操作

    Python进阶----表与表之间的关系(一对一,一对多,多对多),增删改查操作,单表查询,多表查询 一丶表与表之间的关系 背景: ​ ​ ​  ​ ​ 由于如果只使用一张表存储所有的数据,就会操作数 ...

  3. openresty应用场景以及研发网关系统功能说明

    openresty主要应用场景 Web应用 进行一些业务逻辑处理,甚至进行耗CPU的模板渲染,一般流程:mysql/redis/http获取数据.业务处理.产生JSON/XML/模板渲染内容,比如京东 ...

  4. Spring Boot 默认支持的并发量

    Spring Boot应用支持的最大并发量是多少? Spring Boot 能支持的最大并发量主要看其对Tomcat的设置,可以在配置文件中对其进行更改.当在配置文件中敲出max后提示值就是它的默认值 ...

  5. angularcli 第六篇（todolist 列表）

    1.通过文本框输入,向数组添加数据 <!-- 通过文本框输入,向数组添加数据 push --> <input type="text" name="111 ...

  6. Kali下的内网劫持（四）

    在前面我都演示的是在Kali下用命令行的形式将在目标主机上操作的用户的信息捕获的过程,那么接下来我将演示在Kali中用图形界面的ettercap对目标主机的用户进行会话劫持: 首先启动图形界面的ett ...

  7. 动手搭建codecombat服务

    # 因为后面需要使用浏览器访问 127.0.0.1:3000去获取管理员控制权,所以需要一个图形化的界面. yum install net-tools -y   yum groupinstall &q ...

  8. 洛谷 P2384 最短路题解

    题目背景 狗哥做烂了最短路,突然机智的考了Bosh一道,没想到把Bosh考住了...你能帮Bosh解决吗? 他会给你100000000000000000000000000000000000%10金币w ...

  9. docker学习1-CentOS 7安装docker环境

    前言 Docker 提供轻量的虚拟化,你能够从Docker获得一个额外抽象层,你能够在单台机器上运行多个Docker微容器,而每个微容器里都有一个微服务或独立应用,例如你可以将Tomcat运行在一个D ...

  10. 微信小程序~用户转发 onShareAppMessage

    只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮,在用户点击转发按钮的时候会调用,此事件需要return一个Object,包含title和path两个字段,用于自定义转发内容 代码使用onSh ...