mq-admin

vue.js + elementUI 后台管理系统模板

前言

今年年初刚转型学前端，业务需要做一个后台管理系统。好嘛，GitHub，码云先爬一波，发现了许多大佬的作品。那时也刚转型走前端（以前学过网页基础），看了大佬的代码，那么复杂的现在自己肯定做不出来，那么就模仿一下大佬，边学边做一个简单的后台管理系统模板，就当练练手了。
这个设计的想法是不需要太多的知识储备也能使用，不需要你会vue，只要懂得基本的网页开发就可以使用，所以没有做过多的封装，像以往的html页面开发即可

预览地址：http://mqadmin.mqbug.cn/
码云地址：https://gitee.com/mubug/mq-admin
GitHub地址：https://github.com/MQBUG/mq-admin

如果各位有什么意见或者建议，或者有问题都可以在下方留言交流一下

基本介绍

参考 ok-admin 进行设计的一个模板系统，采用基本的html结构，没有使用vue cli。
在 lib/web 文件夹下面的 web.json 文件可以配置相关的侧边栏与一些显示的信息。
该系统可以借鉴学习使用，或者做一点简单的管理系统。这套系统可能就不维护了，有需要的同学可以留言，有空再进行一些升级。
由于使用的是传统的网页开发，所以上手的话不需要很多的知识储备，需要使用那些框架的话直接引入就可以了。
右边的页面使用的是iframe 打开需要的页面，所以有需要页面的话像以往一样开发一个html页面，再web.json 里面进行相关的导航栏配置就可以使用了。

已实现基本的功能

1. 动态生成左侧导航栏
2. 标签栏的基本功能与显示条件（根据页面的大小与打开的标签页进行相对应的调整；注：手动缩放屏幕时没有设置触发，不会主动改变）
3. 关闭当前页，其他页，所有页的功能

基本布局

布局为左边 导航栏，右上方工具栏还有打开页面的标签栏

使用框架包

• vue.js
• element-ui
• layer 弹窗
• jQuery
• 等

文件目录

配置文件 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 的格式，这个可能就不维护了。