基于vue.js+elementUI后台管理系统（html）模板
mq-admin
vue.js + elementUI 后台管理系统模板
前⾔
今年年初刚转型学前端，业务需要做⼀个后台管理系统。好嘛，GitHub，码云先爬⼀波，发现了许多⼤佬的作品。那时也刚转型⾛前端（以前学过⽹页基础），看了⼤佬的代码，那么复杂的现在⾃⼰肯定做不出来，那么就模仿⼀下⼤佬，边学边做⼀个简单的后台管理系统模板，就当练练⼿了。
这个设计的想法是不需要太多的知识储备也能使⽤，不需要你会vue，只要懂得基本的⽹页开发就可以使⽤，所以没有做过多的封装，像以往的html页⾯开发即可
预览地址：
码云地址：
GitHub地址：
如果各位有什么意见或者建议，或者有问题都可以在下⽅留⾔交流⼀下
基本介绍
参考 ok-admin 进⾏设计的⼀个模板系统，采⽤基本的html结构，没有使⽤vue cli。
在 lib/web ⽂件夹下⾯的 web.json ⽂件可以配置相关的侧边栏与⼀些显⽰的信息。
该系统可以借鉴学习使⽤，或者做⼀点简单的管理系统。这套系统可能就不维护了，有需要的同学可以留⾔，有空再进⾏⼀些升级。
由于使⽤的是传统的⽹页开发，所以上⼿的话不需要很多的知识储备，需要使⽤那些框架的话直接引⼊就可以了。
右边的页⾯使⽤的是iframe 打开需要的页⾯，所以有需要页⾯的话像以往⼀样开发⼀个html页⾯，再web.json ⾥⾯进⾏相关的导航栏配置就可以使⽤了。
已实现基本的功能
1. 动态⽣成左侧导航栏
2. 标签栏的基本功能与显⽰条件（根据页⾯的⼤⼩与打开的标签页进⾏相对应的调整；注：⼿动缩放屏幕时没有设置触发，不会主动改变）
3. 关闭当前页，其他页，所有页的功能
基本布局
布局为左边 导航栏，右上⽅⼯具栏还有打开页⾯的标签栏
使⽤框架包
vue.js前端页面模板
element-ui
layer 弹窗
jQuery
等
⽂件⽬录
⽂件夹名字说明
css css样式⽂件
img图⽚⽂件
js js⽂件
lib系统配置 其他框架⽂件
pages需要显⽰的html页⾯
配置⽂件 web.json
在lib/web ⽂件夹下⾯
webInfo 是模板的⼀些颜⾊的代码
navs 是左边导航栏的配置
（导航栏这⾥只⽀持两级）
导航栏参数说明
1、“title”: “控制台”, 导航栏标题
2、“icon”: “el-icon-setting”, 图标样式 使⽤element图标库 有数量限制不能⾃定义
3、“href”: “#”, 链接地址 为# 时不会跳转(有⼦选项时设置)
4、“id”:“2”, 唯⼀标识id 暂时只能⾃定义，每个都需不⼀样
5、“children” 存放⼆级导航栏数组
{
"name":"mq-admin",
"author":"MQ",
"version":"1.0.0",
"webInfo":{
"bg":"#545c64",
"textColor":"#fff",
"textColorActive":"#ffd04b"
},
"activeIndex":0,
"navs":[{
"title":"介绍",
"icon":"el-icon-user-solid",
"href":"pages/intro/index.html",
"id":"6"
},{
"title":"表格",
"icon":"el-icon-s-platform",
"href":"pages/table.html",
"id":"1"
},{
"title":"红包",
"icon":"el-icon-goods",
"href":"pages/redPacket/index.html",
"id":"2"
},{
"title":"demo",
"icon":"el-icon-goods",
"href":"pages/demo/index.html",
"id":"4"
},{
"title":"控制台2",
"icon":"el-icon-setting",
"href":"#",
"id":"3",
"children":[{
"title":"选项1",
"icon":"el-icon-picture",
"href":"pages/test2.html",
"id":"3-1"
},
{
"title":"选项2",
"icon":"el-icon-help",
"href":"pages/test1.html",
"id":"3-2"
}
]
}]
}
快速上⼿
1. 下载mq-admin ⽂件
2. 将需要显⽰的页⾯放到pages⽂件夹下⾯
3. 修改 lib/web 下的web.json ⽂件 ，将需要显⽰的页⾯添加到导航栏⾥⾯
这样就OK了
欢迎各位交流学习，作者这边在学习vue的全家桶，这个系统现在转为 vue cli 的格式，这个可能就不维护了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。