没有天生的高手,更没有永远的菜鸟求知若饥, 虚心若愚

自己写后台管理不求人,基于VUE实现的一款简单的中后台管理模板


最近一直在开源社区浏览一些开源的后台管理框架,从中找到一个自己中意的项目很难,不是后期开发太繁琐,要不就是界面不友好,想了想还是自己搭建一个后台管理模板,以后在开发过程中直接拿过来开发就可以了。
此项目是基于一个HEYUI搭建的一款后台管理模板。

HeyUI 是一套基于 Vue2.0 的开源 UI 组件库,主要服务于一些中后台产品。
HeyUI提供的是一整套解决方案,所有的组件提供全局的可配置模式。真正的数据驱动、全局的配置模式、数据字典化
后台布局通常采用的上左右布局方式

第一部分:登录页面
登录页面主要是靠设计,设计做的好,前端怎么实现出来都好看,这里的登录界面也没有经过专业的设计,反正还能看的过眼吧(请忽略开发的审美)。

功能点:选择记住登录账号时,在登录成功后会将账号保存到本地存储,下次进入页面直接从本地存储获取登录账号,同时在点击登录时会将两个输入框属性设置为只读,按钮出现加载效果。

第二部分:管理后台头部
相对于整个系统来说,这部分是最简单的一部分,其中大多数要写的只是css样式,唯一一点就是登录用户这块,用到了vuex状态管理,如果你在某一处修改了用户信息,只需要执行
this.$store.dispatch('userStore/setUserInfo', {name: '超级管理员'})

就可以修改页面上显示的登录用户的用户名。

第三部分:左边菜单管理
使用Menu组件即可,通过key匹配当前选中的菜单,执行
this.$refs.menu.select(this.$route.name)

选中当前菜单。
第四部分:内容区域
采用子路由加载方式 <router-view />

第五部分:模板主题配置

这里使用的是HEYUI的自定义主题,需要自己定义一个less文件做引用,在less文件中定义主题变量,覆盖框架默认的主题,本模板就是采用自定义less变量更换主题的。
主题文件位置:srcstylethemes.less

原始全局变量文件你可以在github上查看。 https://github.com/heyui/heyui/blob/master/themes/var.less

如果你还需要一些更细节化的调整,官方建议可以新建overwrite.less对已有的class进行覆盖修改。
项目地址:https://gitee.com/yangon/vue-admin-frame
使用
cd vue-admin-frame
npm install
npm run dev

本项目引用到的框架KEYUI:https://www.heyui.top/

如果本文对您有所帮助, 请关注科技男给与支持,后期为您带来更多的技术文章。

文章评论已关闭!