Ant Design 使用教程如何在 React 项目里快速搭建企业级界面【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design做后台系统时登录表单、数据表格、日期选择这些界面往往最费时间。Ant Designantd是一套企业级的 React UI 组件库兼设计语言把这些界面拆成了几十个开箱即用的组件你只关心数据逻辑视觉和交互交给它。下面这条路径适合刚接触 React 的同学装依赖、跑起来、配中文、改主题。Ant Design 安装步骤Vite 项目接入指南先说清楚它适合谁写中后台管理系统、工具站、内部管理界面的 React 团队。核心亮点就三点——组件覆盖常见企业场景且开箱即用、TypeScript 类型完整、基于 CSS-in-JS 的动态主题。当前稳定版是 6.6.2要求 React 18 及以上运行环境支持现代浏览器、服务端渲染SSR和 Electron 桌面端。如果还没有项目用 Vite 初始化一个npm create vite antd-demo cd antd-demo npm install antd --save npm run dev浏览器打开 http://localhost:5173/ 看到 Vite React 界面就算环境通了。把src/App.js换成这样import { Button } from antd; export default () Button typeprimary开始使用 Ant Design/Button;页面上出现品牌蓝的按钮antd 就接好了。它是 ESM 模块按名导入的组件会被打包工具自动摇树不需要任何 babel 插件。Vite 接入完整文档还覆盖了自定义 Vite 配置的写法。第一个 Ant Design 界面带校验的登录表单管理界面绕不开表单。下面是最小可用的登录表单rules负责必填校验onFinish只在校验通过时触发import { Form, Input, Button } from antd; export default () ( Form layoutvertical style{{ maxWidth: 360 }} onFinish{(v) console.log(v)} Form.Item label用户名 nameusername rules{[{ required: true, message: 请输入用户名 }]} Input / /Form.Item Form.Item label密码 namepassword rules{[{ required: true, message: 请输入密码 }]} Input.Password / /Form.Item Button typeprimary htmlTypesubmit登录/Button /Form );Form 的源码和演示在 components/form/每个组件目录里都有中文文档index.zh-CN.md和一堆demo/示例不知道某个属性怎么写时翻一下同组件的 demo 是最快的学习方式。Ant Design 中文配置方法Locale 与 dayjs 设置有个新手必踩的坎antd 默认文案是英文的按钮的确定/取消、表单的校验提示都是 English。解决方式是在应用根部用ConfigProvider注入中文语言包日期类组件依赖 dayjs它也要单独设一次import { ConfigProvider, DatePicker, App } from antd; import zhCN from antd/locale/zh_CN; import dayjs from dayjs; dayjs.locale(zh-cn); export default () ( ConfigProvider locale{zhCN} App / /ConfigProvider );语言包一共 60 多种都在 components/locale/ 目录需要英文界面时换成en_US即可两种语言可以在不同区域并存。定制主题指南改主色、切换暗色模式想换品牌色改theme.token里的主色和圆角就够了想要暗色模式加一个darkAlgorithm算法即可不用手写一行 CSSimport { ConfigProvider, theme, App } from antd; export default () ( ConfigProvider theme{{ token: { colorPrimary: #0d9488, borderRadius: 8 }, algorithm: [theme.darkAlgorithm], }} App / /ConfigProvider );还能针对单个组件微调Component Token比如只改按钮高度而不动其他组件完整规则见 定制主题文档。Ant Design 常见坑与进阶方向几个实际会遇到的问题先打个预防针 ⚠️message、Modal、notification的静态方法如message.success(ok)读不到ConfigProvider的上下文主题和语言会失效。正确姿势是改用 hook 拿上下文或者用App组件包裹整个应用让静态方法也能拿到配置import { message, App } from antd; const Demo () { const [messageApi, contextHolder] message.useMessage(); return ( {contextHolder} button onClick{() messageApi.success(保存成功)}提交/button / ); }; export default () AppDemo //App;版本与迁移从 4.x 或 5.x 升级前先读 v6 迁移文档破坏性变更都列在那里。性能antd 默认在运行时生成组件样式6.0 起提供zeroRuntime模式改为预编译的静态样式文件适合对首屏敏感的页面。看源码组件实现都在 components/ 下目录即组件名配合各目录里的 demo 和中文文档可以直接学习内部写法。组件太多挑花眼的话从 快速上手文档开始照着第一个例子的节奏逐个组件尝试比通读文档效率高得多。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考