> UI组件使用详见 [iView官网文档](https://www.iviewui.com/docs/guide/install)【务必收藏仔细阅读】 > Vue Cli 4.x以后版本的配置文件在 `vue.config.js`中，[官方中文配置文档](https://github.com/vuejs/vue-cli/tree/dev/docs/zh/config) ### 全局配置 - 全局需要经常修改的配置建议添加至`public/config.js`中，打包后仍可找到该文件修改，便于后期部署运维修改 - 使用：`config.你添加的配置名` ### 如何添加更多级菜单？ - 目前暂限制添加三级菜单（包含顶部菜单），如需更多级请考虑其他方式：推荐使用`Tab`组件或`Menu`等组件，参考`系统监控-操作日志`或`XBoot业务组件`菜单页面，将每个子级页面内容封装成单独组件即可，用户使用体验更佳 ### Tag标签页面缓存说明 - 由于路由已使用`keep-alive`组件（Main.vue中），当且仅当组件name名与菜单路由中配置的路由名一致时页面缓存生效 <img src=https://ooo.0o0.ooo/2020/03/30/lcNw2DpM9Qd3kTx.png width=700 /> - 不想要缓存的页面还可以在`/src/store/modules/app.js`中的`dontCache`配置，将页面的name属性值添加配置即可 ### 请求方法 - api接口建议统一放在`src/api`文件夹下统一引用方便管理，也可全局使用封装挂载好的请求方法，如`this.getRequest()、this.postRequest()`等 - 统一请求前缀`/xboot`在`public/config.js`中修改，打包后仍可找到该文件修改 - 已封装且已全局挂载请求axios列表 | 请求名 | 请求方法 | 说明 | | --- | --- | --- | | getRequest | GET | 携带Token认证的GET请求 | | postRequest | POST | 携带Token认证的POST请求，`Content-Type`为`application/x-www-form-urlcoded` | | putRequest | PUT | 携带Token认证的PUT请求，`Content-Type`为`application/x-www-form-urlcoded` | | postBodyRequest | POST | 携带Token认证的POST请求，`Content-Type`为`application/json`，后端需使用`@RequestBody`接收对象参数 | | getNoAuthRequest | GET | 无Token认证的GET请求，避免旧Token过期导致请求失败 | | postNoAuthRequest | POST | 无Token认证的POST请求，`Content-Type`为`application/x-www-form-urlcoded` | ### 菜单页面动态添加说明 > 仅有一个一级菜单不会显示，请为该一级菜单至少添加一个子级菜单 - 系统菜单中动态添加配置，请参考已有配置。注：一级菜单组件只能填`Main`，url路径前必须加上`/`，二级菜单页面Vue组件请放置`views`目录中开发。  - 添加菜单后记得在“角色管理”中，给相应用户拥有的角色分配上菜单权限（分配后菜单实时刷新显示，无需刷新页面）  - 菜单始终显示配置说明  ### 权限控制界面显示 - 权限按钮或其他内容显示控制自定义标签：`v-has`，使用示例： ``` <Button v-has="'add'">添加按钮</Button> <Button v-has="'edit'">编辑按钮</Button> <Button v-has="'delete'">删除按钮</Button> <div v-has="'view'">需要view权限的界面内容</div> ``` - js中权限判断示例 ``` if(this.$route.meta.permTypes && this.$route.meta.permTypes.includes("edit")){ return ... ... }else{ return ... ... } ``` - 注意权限标签中的`v-has`数据需与菜单中页面下配置的权限按钮类型匹配（权限按钮类型可在“数据字典”中配置）  - 根据当前登录的用户拥有的角色全局控制权限显示，直接使用即可，自定义标签：`v-hasRole`，使用示例： ``` <Button v-hasRole="'ROLE_ADMIN'">添加按钮</Button> ``` - js中判断使用 ``` if(this.getStore('roles').includes("ROLE_ADMIN")){ ... ... } ``` ### 获取当前登录用户数据 - 已全局挂载 ```javascript this.getUserInfo(); ```