README.md · 余二六呀/vue-element-ui-admin

# 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/)

余二六呀/vue-element-ui-admin

简介

发行版

贡献者

近期动态

余二六呀/vue-element-ui-admin .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

余二六呀/vue-element-ui-admin