如何用React生态替代Ant Design Pro快速搭建轻量级后台管理系统？

本文共计3164个文字，预计阅读时间需要13分钟。

目录+前言+项目初始化+数据请求++Mock+配置+axios+配置+react-query+Mock+路由权限配置+路由文件+main.tsx+App.tsx+页面编写+login+页面+BasicLayout+动态菜单栏+封装页面通用组件包+总结+前言+你是否经历过这样的项目开发？

目录

• 前言
• 项目初始化
• 数据请求 + mock
• 配置 axios
• 配置 react-query
• mock
• 路由权限配置
• 路由文件
• main.tsx
• App.tsx
• 页面编写
• login 页面
• BasicLayout
• 动态菜单栏
• 封装页面通用面包屑
• 总结

前言

你是否经历过公司的产品和 ui 要求左侧菜单栏要改成设计图上的样子？ 苦恼 antd-pro 强绑定的 pro-layout 菜单栏不能自定义？你可以使用 umi，但是就要根据它的约定来开发，捆绑全家桶等等。手把手教你搭一个轻量级的后台模版，包括路由的权限、动态菜单等等。

为方便使用 antd 组件库，你可以改成任意你喜欢的。