分享一个vue+element的后台项目模板优化

前言

昨天看文章的时候, 看到了一篇有关于使用vue-cli构建vue基础项目的, 然后下载了他的项目启动着看了一下, 感觉整体来讲界面挺好, 挺简约的, 内部的代码逻辑也没有什么太复杂的东西, 对于需要新建项目从头开始开发的小伙伴来说, 可以借鉴或者直接下载下来用.  这边主要是针对项目的tabs与菜单栏之间的互动这一块做了一些优化, 因为本身模板只支持二级菜单, 而后台项目一般可能会出现三级菜单, 四级菜单基本不会有, 所以针对这种状况, 就优化了一下它本身的逻辑, 提供了三级菜单的映射. 然后做了一个keep-alive的保持活性处理, 这个非常简单, 就不说了

正文

首先放上原文的链接

www.cnblogs.com/gaosong-shu…

然后放上优化后的项目地址

github.com/hejiyun/vue…git clone git@github.com:hejiyun/vue-element-model.git

简单来说一下, 这个模板的话, 基本功能都完备, 在实际使用这个模板开发时,

1. 联调方面

2. axios配置请求

3. router路由定义--菜单栏

4. 菜单栏及tab标签 和路由跳转 关联映射,

** 这一块不需要去做, 已经有了, 主要是通过watch监听去获取对应跳转路由匹配默认菜单栏activePath**

5. 权限路由及项目整理

这边我就不做其他整理了, 基本上使用这个模板可以直接进行组件页面的开发, 权限方面可变性挺多的,  反正就是一个思路, 通过再路由meta元信息中添加role属性, 通过role属性对应的字段去过滤出可以显示的页面, 然后就可以了, 路由本身的hidden属性也会隐藏对应的菜单

结语

好了, 上述就是一个看起来挺简约美观的vue项目模板, 主要是对菜单栏映射做了一个优化, 以及简单的介绍了一下功能点, 用脚手架的话, 基本上也没什么好复述的, 百度上很多, 就不细讲了,
最后, 祝各位天天开心, 越来越优秀!