投稿

用vue搭建一个渐进式管理平台框架

Vedu • • 程序开发 • 阅读 1322

1.简介

本人创建的一个渐进式管理平台，是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了动态路由，权限验证，提炼了最简平台管理框架。

2.前序准备

本项目技术栈基于 node.js12、ES2015 、vue、vuex、vue-router 、vue-cli 、axios 和 element-ui，所有的请求数据都使用Mock.js进行模拟。

3.Demo预览

3.1登录窗口

登录窗口：随便输入三个字符，密码随意登录。

你会用vue搭建一个渐进式管理平台框架吗？

图3.1

3.2首页

首页：权限显示

你会用vue搭建一个渐进式管理平台框架吗？

图3.2

3.3表格Demo-自适应高度

表格Demo：表格表头固定，表体跟据浏览器高度自适应高度，也可设置距离底边距离X px。

你会用vue搭建一个渐进式管理平台框架吗？

图3.3

3.4对话框Demo

对话框Demo：点击按钮弹出form对话框显示。

你会用vue搭建一个渐进式管理平台框架吗？

图3.4

3.5表格分页 Demo

表格分页Demo ：表格表头固定，表体跟据浏览器高度自适应高度，设置底部50px预留分页组件。

你会用vue搭建一个渐进式管理平台框架吗？

图3.5

3.6内容页滚动Demo

内容页滚动Demo：上部Head 和 Tab页签 固定位置，内容页滚动。

你会用vue搭建一个渐进式管理平台框架吗？

图3.6

3.7页面内容-权限控制

3.7.1权限控制：设置admin权限，才会显示按钮。

你会用vue搭建一个渐进式管理平台框架吗？

图3.7.1

3.7.2 下图是editor权限，不显示按钮

你会用vue搭建一个渐进式管理平台框架吗？

图3.7.2

3.8左边导航权限控制

3.8.1左边导航权限控制：admin权限才显示用户数据菜单，导航权限通过router路由配置文件。

你会用vue搭建一个渐进式管理平台框架吗？

图3.8.1

3.8.2是editor权限，左边导航菜单就没有用户管理子菜单。

你会用vue搭建一个渐进式管理平台框架吗？

图3.8.2

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/procedure/14420.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2020-11-14 07:53
下一篇 2020-11-14 07:55

相关推荐

发表评论

登录后才能评论