Ant Design Pro v6 完全入门React 19 antd 6 中后台脚手架的 5 大重磅升级【免费下载链接】ant-design-pro Use Ant Design like a Pro!项目地址: https://gitcode.com/gh_mirrors/an/ant-design-proAnt Design Pro 是一款开箱即用的 React 中后台脚手架基于 Ant Design 6 设计规范打造内置权限管理、国际化、Mock 开发和 20 企业级页面模板。v6 版本全面升级技术栈React 19 antd 6 Umi Max 4还带来了 Tailwind CSS v4 主题、内置 AI 助手等 5 大重磅升级。本文带你快速搞懂它是什么、新在哪、怎么用。一、为什么选 Ant Design Pro中后台项目的痛点登录鉴权、表格、表单、图表、布局……每个都要从零搭。Ant Design Pro 把这些企业级通用页面全部做好了页面类型包含模板 仪表盘分析页、监控页、工作台 表单基础表单、分步表单、高级表单 列表查询列表文章/项目/应用、表格列表、卡片列表 账户账户中心、账户设置⚠️ 异常页403 / 404 / 500 AIAI 助手聊天页开箱还自带TypeScript 严格模式、路由权限、8 种语言国际化src/locales/、Mock 开发方案、暗色主题。完整功能清单见 README.md。二、v6 的 5 大重磅升级升级 1全新技术栈 —— React 19 antd 6 极速构建v6 把核心依赖一次性拉满React 19.2、antd 6.6、Umi Max 4.7并采用 Rust 编写的utoopack打包器替代传统 Webpack构建与热更新速度大幅提升。项目最低要求 Node.js 22LTS。依赖清单package.json构建与插件配置含utoopack规则config/config.ts 对新手来说最直观的感受就是npm start启动更快、保存代码后页面刷新更跟手。升级 2Tailwind CSS v4 antd-style 新主题体系v6 重塑了样式方案形成清晰的优先级体系Tailwind CSS v4原子化布局类写页面布局不用再纠结 class 命名antd-style v4基于 antd 设计 Token 的 CSS-in-JS暗色主题、换肤零成本Less仅用于存量代码不推荐新写。主题在 config/config.ts 中通过antd.configProvider配置如variant: filled填充风格全局样式入口在 src/global.style.ts。升级 3内置 AI 助手页面Ant Design X这是 v6 最亮眼的升级之一——项目内置了一个完整的AI 聊天助手页面基于 Ant Design X 组件库实现功能拉满 会话列表管理新建、分组、删除⚡ 流式输出Streaming 打字机效果 AI 思考过程Think折叠展示 Markdown 流式渲染XMarkdown源码在 src/pages/chatbot/index.tsx配套数据定义见 src/pages/chatbot/data.d.ts。如果你的业务要接大模型照这个页面改就行省掉大量造轮子时间。升级 4React Query 服务端状态管理内置中后台项目最头疼的是请求状态、缓存、重试。v6 通过 Umi 插件直接集成了tanstack/react-query v5配合 Umi 内置的request基于 axios ahooks useRequest形成完整的数据请求方案统一请求拦截与错误处理src/requestErrorConfig.ts登录态初始化401 自动跳登录src/app.tsx权限判断src/access.ts新手友好点大部分页面直接用 ProTable 的request属性即可加载数据复杂状态才需要 react-query。升级 5PWA 离线支持 Cloudflare Worker 演示后端v6 把可部署、可演示也做成了产品能力PWA 离线模式注册 Service Worker Manifest断网时展示离线提示横幅src/components/OfflineBanner/可安装到桌面☁️Cloudflare Worker Mock 后端cloudflare-worker/ 是一套独立的 Hono 应用可把演示数据一键部署到边缘云本地开发则用 mock/ 目录下的 Express 风格 Mock。再叠加测试工具链从 Jest 迁移到Vitest原生 ESM、毫秒级启动代码质量由Biome统一把关整个开发工作流更加现代化。三、三步快速上手前提安装 Node.js 22。第 1 步克隆项目git clone --depth1 https://gitcode.com/gh_mirrors/an/ant-design-pro myapp cd myapp第 2 步安装依赖npm install第 3 步启动开发服务器npm start浏览器打开后用admin / ant.design或user / ant.design登录即可体验。⚡ 想要极简版运行npm run simple可一键裁剪到只剩登录、首页、404 等核心页面此操作不可逆建议先提交代码。常用命令速查见 docs/cheatsheet.zh-CN.md。四、项目结构速览目录/文件作用config/routes.ts声明式路由access字段控制菜单权限src/app.tsx运行时配置、全局初始状态用户信息src/pages/所有页面模板每个页面自带service.ts_mock.tssrc/locales/8 种语言包中文、英文、日文等cloudflare-worker/独立 Hono 后端可部署演示环境docs/快速上手指南与 v6 演进规划五、写在最后Ant Design Pro v6 不只是版本数字1React 19 的新特性、antd 6 的视觉焕新、Tailwind v4 的效率、AI 助手、React Query……每一项都是中后台开发的高频痛点解法。给新手的建议路径✅ 先npm start跑起来把登录页、表格列表、仪表盘逛一遍✅ 对照 docs/cheatsheet.zh-CN.md 学会增删页面与配置路由✅ 业务需要 AI 能力时参考 src/pages/chatbot/ 的 Ant Design X 实现。从脚手架到生产应用Ant Design Pro 帮你把通用部分做到极致你只需专注业务本身。【免费下载链接】ant-design-pro Use Ant Design like a Pro!项目地址: https://gitcode.com/gh_mirrors/an/ant-design-pro创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
