# vue-element-ui-admin **Repository Path**: yy1122/vue-element-ui-admin ## Basic Information - **Project Name**: vue-element-ui-admin - **Description**: vue-element-ui-admin，springboot基础的权限管理系统，tinymce5富文本编辑器，文件浏览器（文件管理） - **Primary Language**: Java - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 42 - **Forks**: 16 - **Created**: 2020-04-10 - **Last Updated**: 2025-08-26 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # vue-element-ui-admin #### 介绍 vue-element-ui-admin，springboot基础的权限管理系统 #### 软件架构，如果仓库有更新，请务必还是更新下，有时候会修复一些小bug，有时候也是写着写着bug才被发现 提供了两种常用的后台ui，都是基于[vue-element-admin](https://panjiachen.github.io/vue-element-admin-site/zh/guide/)，没有更改作者整体结构，人家已经做得很好了，只是改了部分逻辑，比如路由的方法计算 富文本和文件管理器：[点击查看](https://gitee.com/yy1122/vue-element-ui-admin/tree/master/vue-element-admin) vue-element-admin-left：左侧菜单类型 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0602/105601_f5f0f7cc_1559021.png "Snipaste_2020-06-02_10-54-18.png") vue-element-admin-top-left：左侧-顶部菜单联动类型，其中是由顶部菜单来控制 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0602/105621_6121d0fa_1559021.png "Snipaste_2020-06-02_10-39-10.png") vue-element-admin-top：顶部菜单类型，这种可能适合一些地图操作啊，或者其他偏操作类的系统，[点我进入制作logo](https://www.logoly.pro/#/)😀 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0702/174537_af19b8c7_1559021.png "Snipaste_2020-07-02_17-42-00.png") ### 菜单说明：请先查看 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0729/105909_77edcb30_1559021.png "Snipaste_2020-07-29_10-57-40.png") #### vue版本说明 对于前端这些工具我不是专业的，相关版本具体你可以看一下截图，希望能用到 问了下朋友说vue-cli 内嵌了webpack。配置就能用 我创建项目就是vue create hello-world，没有配置webpack，看package.json里面的的版本是4.2.3，截图里面的应该是被我升级了 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0706/115441_d51fb20a_1559021.png "屏幕截图.png") #### 安装教程 1. git，你会看到三个文件夹，其中boot-auth是后台，vue-element-admin这个已经打包到后台，启动后台后访问http://127.0.0.1:18080/index.html 即可，其中两个是不同的ui，之所以没做成一个，是感觉没必要，哪个符合就用哪个 2. 后台依赖redis，mysql，请先安装好并且yml也要配置好导入sql文件，前台vue环境是肯定的 3. 后台启动（`npm run serve`），前台开发环境启动即可，前台开发环境配置了proxy，以dev-api就会转发到对应的target，可以看vue.config.js的47行；正是环境是prod-api，如果你打包（`npm run build`）后，肯定proxy无效了，你需要配置自己的nginx代理 #### 使用说明 1. 后台角色只是一种简单的角色，没有上下级关系，如果您需要类似部门等等，可以自行修改即可，前台把角色改成部门即可 2. 由于菜单是动态生成的，所以你开发的时候可能需要添加一个模块，但是又要去配置菜单哪些。很烦。你可以在store/modules/permission.js里面的变量tempRoutes按照树形菜单给设置上去，但是有顶部菜单的那个ui如果你的当前路由是在你的tempRouters里面，那么当你刷新的时候你的左侧菜单可能是空白，这时你需要随便点一个顶部菜单就可以了。具体树形菜单规则您也可以看vue-element-admin官方或者当前文件。这样你的路由就不会收到后台限制了，等开发完了再添加到后台 3. 多级菜单，您需要重写store/modules/permission.js的filterAsyncRoutes方法，按照官方文档生成对应的树，而且需要添加对应router-view，具体您可到vue-element-admin官方有说明 4. 此基础项目非常的基础简洁，前后台也没有添加其他的配置或模块进去。 4.1 你在代码里面看到window.resize那一块，主要是给table设置的最大高度，防止数据过多内容块需要滑动，你看每个页面基本上都是在el-card 包裹之下的，如果不喜欢，删除就可以。当前bug：多选项卡那个ui，如果打开多个，那么前面的这个事件是无效的， 可以用activated方法解决此问题，注意vue name和路由的name要相同 ``` activated() { this.resize() }, mounted() { this.resize() }, methods: { resize() { //TODO: } } ``` 5. 我一般关闭了ESLint，对我个人来说没用 6. 此项目用途，据看你怎么用了，给人家做毕设，公司后台管理都可以 7. 默认大小可以idea全局搜索Cookies.get('size') 就可以改了 如果您遇到使用此项目遇到了什么问题可以@：1396513066@qq.com ----- #### 参与贡献 1. Fork 本仓库 2. 新建 Feat_xxx 分支 3. 提交代码 4. 新建 Pull Request #### 码云特技 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 2. 码云官方博客 [blog.gitee.com](https://blog.gitee.com) 3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目 4. [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目 5. 码云官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help) 6. 码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)