最近一直在开源社区浏览一些开源的后台管理框架,从中找到一个自己中意的项目很难,不是后期开发太繁琐,要不就是界面不友好,想了想还是自己搭建一个后台管理模板,以后在开发过程中直接拿过来开发就可以了。
此项目是基于一个HEYUI搭建的一款后台管理模板。
![a822e189ee77acd746287d96d0e9a1d1.png](https://i-blog.csdnimg.cn/blog_migrate/aa64d195b9979ba7eb82e1478a045939.jpeg)
HeyUI 是一套基于 Vue2.0 的开源 UI 组件库,主要服务于一些中后台产品。
HeyUI提供的是一整套解决方案,所有的组件提供全局的可配置模式。真正的数据驱动、全局的配置模式、数据字典化
后台布局通常采用的上左右布局方式
![2d5a69b77e923296f049bb2655f39bf8.png](https://i-blog.csdnimg.cn/blog_migrate/1a57b9682760fd1ec0ecb412e2bc36d4.jpeg)
第一部分:登录页面
登录页面主要是靠设计,设计做的好,前端怎么实现出来都好看,这里的登录界面也没有经过专业的设计,反正还能看的过眼吧(请忽略开发的审美)。
![9d142795ae5e8e90d296c5d8d56596d3.png](https://i-blog.csdnimg.cn/blog_migrate/1d110a8235c071bc6e7d91be991613c7.jpeg)
功能点:选择记住登录账号时,在登录成功后会将账号保存到本地存储,下次进入页面直接从本地存储获取登录账号,同时在点击登录时会将两个输入框属性设置为只读,按钮出现加载效果。
第二部分:管理后台头部
相对于整个系统来说,这部分是最简单的一部分,其中大多数要写的只是css样式,唯一一点就是登录用户这块,用到了vuex状态管理,如果你在某一处修改了用户信息,只需要执行
this.$store.dispatch('userStore/setUserInfo', {name: '超级管理员'})
就可以修改页面上显示的登录用户的用户名。
第三部分:左边菜单管理
使用Menu组件即可,通过key匹配当前选中的菜单,执行
this.$refs.menu.select(this.$route.name)
选中当前菜单。
第四部分:内容区域
采用子路由加载方式
![e67e4bc1d280f008efcedc27da1a9662.png](https://i-blog.csdnimg.cn/blog_migrate/dedd25d56189880ce24b727391c1b971.jpeg)
![e67e4bc1d280f008efcedc27da1a9662.png](https://i-blog.csdnimg.cn/blog_migrate/dedd25d56189880ce24b727391c1b971.jpeg)
第五部分:模板主题配置
这里使用的是HEYUI的自定义主题,需要自己定义一个less文件做引用,在less文件中定义主题变量,覆盖框架默认的主题,本模板就是采用自定义less变量更换主题的。
主题文件位置:srcstylehemes.less
原始全局变量文件你可以在github上查看。
https://github.com/heyui/heyui/blob/master/themes/var.less
如果你还需要一些更细节化的调整,官方建议可以新建overwrite.less对已有的class进行覆盖修改。
项目地址:https://gitee.com/yangon/vue-admin-frame
使用
git clone https://gitee.com/yangon/vue-admin-framecd vue-admin-framenpm installnpm run dev
本项目引用到的框架KEYUI:https://www.heyui.top
如果本文对您有所帮助, 请关注科技男给与支持,后期为您带来更多的技术文章。