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

大家好，欢迎来到IT知识分享网。

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

此项目是基于一个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变量更换主题的。

主题文件位置:src\style\themes.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-frame

cd vue-admin-frame

npm install

npm run dev

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

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