阅读 2025

分享一个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. 联调方面

在config目录下的index.js中的proxyTable中配置对应的联调端口ip, pathRewrite表示设置路径匹配规则

2. axios配置请求

在src下的config是axios创建对象的配置

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

第一层级定义是home, 意义在于主体的内容组件嵌套在home里, 是侧边栏和顶栏一直保持 如果是要显示一级菜单形式,即无二级菜单的, 那么就不填写chilren属性, single代表单页面

如果需要二级菜单

如果需要设置三级菜单

依次嵌套, 底层元素无chilren属性, 设置三级目录需要注意的是, 二级目录对应的组件需要再次嵌套router-view 菜单一对应的组件的代码

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

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

5. 权限路由及项目整理

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

结语

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

文章分类
前端
文章标签