基于 vue.js + elementUI 后台管理系统 （html）模板

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
• 等

文件目录

文件夹名字	说明
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 的格式，这个可能就不维护了。