> 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(); ```