700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 基于 vue.js + elementUI 后台管理系统 (html)模板

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

时间:2022-11-26 01:27:51

相关推荐

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

mq-admin

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

前言

今年年初刚转型学前端,业务需要做一个后台管理系统。好嘛,GitHub,码云先爬一波,发现了许多大佬的作品。那时也刚转型走前端(以前学过网页基础),看了大佬的代码,那么复杂的现在自己肯定做不出来,那么就模仿一下大佬,边学边做一个简单的后台管理系统模板,就当练练手了。

这个设计的想法是不需要太多的知识储备也能使用,不需要你会vue,只要懂得基本的网页开发就可以使用,所以没有做过多的封装,像以往的html页面开发即可

预览地址:/

码云地址:/mubug/mq-admin

GitHub地址:/MQBUG/mq-admin

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

基本介绍

参考 ok-admin 进行设计的一个模板系统,采用基本的html结构,没有使用vue cli

在 lib/web 文件夹下面的 web.json 文件可以配置相关的侧边栏与一些显示的信息。

该系统可以借鉴学习使用,或者做一点简单的管理系统。这套系统可能就不维护了,有需要的同学可以留言,有空再进行一些升级。

由于使用的是传统的网页开发,所以上手的话不需要很多的知识储备,需要使用那些框架的话直接引入就可以了。

右边的页面使用的是iframe 打开需要的页面,所以有需要页面的话像以往一样开发一个html页面,再web.json 里面进行相关的导航栏配置就可以使用了。

已实现基本的功能

1. 动态生成左侧导航栏

2. 标签栏的基本功能与显示条件(根据页面的大小与打开的标签页进行相对应的调整;:手动缩放屏幕时没有设置触发,不会主动改变)

3. 关闭当前页,其他页,所有页的功能

基本布局

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

使用框架包

vue.jselement-uilayer 弹窗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"}]}]}

快速上手

下载mq-admin 文件将需要显示的页面放到pages文件夹下面修改 lib/web 下的web.json 文件 ,将需要显示的页面添加到导航栏里面

这样就OK了

欢迎各位交流学习,作者这边在学习vue的全家桶,这个系统现在转为 vue cli 的格式,这个可能就不维护了。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。