Ant Design Pro Vue使用心得

Posted 2023-03-02

参考技术A 路由和菜单是组织起一个应用的关键骨架，pro 中的路由为了方便管理，使用了中心化的方式，在 ==router.config.js== 统一配置和管理。

目前脚手架中所有的路由都通过 ==router.config.js== 来统一管理，在 ==vue-router== 的配置中我们增加了一些参数，如 ==hideChildrenInMenu==,==meta.title==,==meta.icon==,==meta.permission==，来辅助生成菜单。其中：

具体请参考 https://pro.loacg.com/docs/router-and-nav

菜单根据 ==router.config.js== 生成，具体逻辑在 ==src/store/modules/permission.js== 中的 ==actions.GenerateRoutes== 方法实现。

在 Ant Design Pro 中，我们抽离了使用过程中的通用布局，都放在 ==/components/layouts== 目录中，分别为：

在 Ant Design Pro 中，一个完整的前端 UI 交互到服务端处理流程是这样的：

从上面的流程可以看出，为了方便管理维护，统一的请求处理都放在 @/src/api 文件夹中，并且一般按照 model 纬度进行拆分文件，如：

其中，==@/src/utils/request.js== 是基于 ==axios== 的封装，便于统一处理 ==POST==，==GET== 等请求参数，请求头，以及错误提示信息等。具体可以参看 ==request.js==。 它封装了全局 request 拦截器、response 拦截器、统一的错误处理、baseURL 设置等。

例如在 api 中的一个请求用户信息的例子：

参考： https://pro.loacg.com/docs/biz-icon 、

参考： https://pro.loacg.com/docs/i18n

参考： https://pro.loacg.com/docs/authority-management

-更换logo在==src\components\tools\Logo.vue==中更换

在==vue.config.js==文件中修改

在文件==src\utils\request.js==中设置

动态方法的引用

调用获取动态方法