vue-element-ui-admin
介绍
vue-element-ui-admin,springboot基础的权限管理系统
软件架构,如果仓库有更新,请务必还是更新下,有时候会修复一些小bug,有时候也是写着写着bug才被发现
提供了两种常用的后台ui,都是基于vue-element-admin,没有更改作者整体结构,人家已经做得很好了,只是改了部分逻辑,比如路由的方法计算
富文本和文件管理器:点击查看
vue-element-admin-left:左侧菜单类型
vue-element-admin-top-left:左侧-顶部菜单联动类型,其中是由顶部菜单来控制
vue-element-admin-top:顶部菜单类型,这种可能适合一些地图操作啊,或者其他偏操作类的系统,点我进入制作logo😀
菜单说明:请先查看
vue版本说明
对于前端这些工具我不是专业的,相关版本具体你可以看一下截图,希望能用到
问了下朋友说vue-cli 内嵌了webpack。配置就能用
我创建项目就是vue create hello-world,没有配置webpack,看package.json里面的的版本是4.2.3,截图里面的应该是被我升级了
安装教程
- git,你会看到三个文件夹,其中boot-auth是后台,vue-element-admin这个已经打包到后台,启动后台后访问http://127.0.0.1:18080/index.html 即可,其中两个是不同的ui,之所以没做成一个,是感觉没必要,哪个符合就用哪个
- 后台依赖redis,mysql,请先安装好并且yml也要配置好导入sql文件,前台vue环境是肯定的
- 后台启动(
npm run serve
),前台开发环境启动即可,前台开发环境配置了proxy,以dev-api就会转发到对应的target,可以看vue.config.js的47行;正是环境是prod-api,如果你打包(npm run build
)后,肯定proxy无效了,你需要配置自己的nginx代理
使用说明
- 后台角色只是一种简单的角色,没有上下级关系,如果您需要类似部门等等,可以自行修改即可,前台把角色改成部门即可
- 由于菜单是动态生成的,所以你开发的时候可能需要添加一个模块,但是又要去配置菜单哪些。很烦。你可以在store/modules/permission.js里面的变量tempRoutes按照树形菜单给设置上去,但是有顶部菜单的那个ui如果你的当前路由是在你的tempRouters里面,那么当你刷新的时候你的左侧菜单可能是空白,这时你需要随便点一个顶部菜单就可以了。具体树形菜单规则您也可以看vue-element-admin官方或者当前文件。这样你的路由就不会收到后台限制了,等开发完了再添加到后台
- 多级菜单,您需要重写store/modules/permission.js的filterAsyncRoutes方法,按照官方文档生成对应的树,而且需要添加对应router-view,具体您可到vue-element-admin官方有说明
- 此基础项目非常的基础简洁,前后台也没有添加其他的配置或模块进去。
4.1 你在代码里面看到window.resize那一块,主要是给table设置的最大高度,防止数据过多内容块需要滑动,你看每个页面基本上都是在el-card
包裹之下的,如果不喜欢,删除就可以。当前bug:多选项卡那个ui,如果打开多个,那么前面的这个事件是无效的,
可以用activated方法解决此问题,注意vue name和路由的name要相同
activated() {
this.resize()
},
mounted() {
this.resize()
},
methods: {
resize() {
//TODO:
}
}
- 我一般关闭了ESLint,对我个人来说没用
- 此项目用途,据看你怎么用了,给人家做毕设,公司后台管理都可以
- 默认大小可以idea全局搜索Cookies.get('size') 就可以改了
如果您遇到使用此项目遇到了什么问题可以@:1396513066@qq.com
参与贡献
- Fork 本仓库
- 新建 Feat_xxx 分支
- 提交代码
- 新建 Pull Request
码云特技
- 使用 Readme_XXX.md 来支持不同的语言,例如 Readme_en.md, Readme_zh.md
- 码云官方博客 blog.gitee.com
- 你可以 https://gitee.com/explore 这个地址来了解码云上的优秀开源项目
-
GVP 全称是码云最有价值开源项目,是码云综合评定出的优秀开源项目
- 码云官方提供的使用手册 https://gitee.com/help
- 码云封面人物是一档用来展示码云会员风采的栏目 https://gitee.com/gitee-stars/