4步跑通第一个Ant Design应用从克隆仓库到可复用表单页【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-designAnt Design 是企业级 React 组件库表单、表格、日期选择等 60 组件开箱即用。这篇文章带你从零安装并跑通它再给出三个高频用法的可复用写法。场景与方案概览当你想用 React 做后台管理系统、内部工具或 B 端数据应用且不想自己写表单校验、表格分页这些样式和交互时选 Ant Design 最省事。本文从克隆仓库开始一路走到本地组件站点跑起来覆盖以下实操要点准备 Node.js 环境并校验版本一键克隆仓库并安装依赖启动本地组件站点验证按钮、表单、主题三处高频用法从零到跑通最小可行步骤安装 Node.js 环境Ant Design 要求 Node.js v16 及以上版本Node 是运行前端工程脚本的运行时。已有 Node 的话先校验版本node -v预期输出v16或更高的版本号低于 v16 请先升级再继续。克隆 Ant Design 仓库把源码拉到本地目录git clone https://gitcode.com/GitHub_Trending/an/ant-design cd ant-design预期终端进入ant-design目录能看到components/、docs/等目录。一键安装依赖安装全部依赖首次安装需要几分钟npm install预期项目下生成node_modules目录且终端没有报错输出。启动组件站点验证本地启动官方组件文档站它内置了全部组件的可交互 Demonpm start预期服务启动后浏览器打开http://localhost:8001可点开任意组件页Button、Table 等直接运行 Demo。高频用法速查Ant Design 组件下面三个写法覆盖日常大多数场景代码均可直接复制运行。1. 使用按钮—— 提交、删除、取消等操作需要统一风格时import { Button } from antd; export default () ( Button typeprimary主要按钮/Button Button默认按钮/Button Button typelink链接按钮/Button / ); 提示不需要配置 babel-plugin-import。antd 默认走 ES modules tree shaking未引用的组件会自动被移除见 docs/react/getting-started.zh-CN.md。2. 带校验的表单—— 登录、设置页、注册等任何输入场景都会用到import { Button, Form, Input } from antd; export default () ( Form layoutvertical onFinish{(v) console.log(v)} Form.Item nameuser rules{[{ required: true, message: 请输入 }]} Input / /Form.Item Button typeprimary htmlTypesubmit提交/Button /Form ); 提示校验规则写在rules数组里全部字段通过才会触发onFinish表单完整 API 见 components/form/index.zh-CN.md。3. 一行换主题—— 全局改品牌色和圆角不用逐组件写 CSSimport { Button, ConfigProvider } from antd; export default () ( ConfigProvider theme{{ token: { colorPrimary: #f5222d, borderRadius: 8 } }} Button typeprimary主题按钮/Button /ConfigProvider ); 提示ConfigProvider包在应用入口即可影响全部后代组件主题 token 列表见 docs/react/customize-theme.zh-CN.md。所有组件的完整 API 与演示可从 components/button/index.zh-CN.md 这类组件文档逐一查看。上线前必看的 3 件事校验按需加载方式——生产构建直接写import { X } from antd不要再写antd/es/button这类子路径引入否则可能破坏 tree shaking 导致体积膨胀可用官方 CLI 的antd usage ./src检查项目里的 antd 导入见 docs/react/cli.zh-CN.md。用 Design Token 统一主题——不要手写 CSS 覆盖组件样式改为在ConfigProvider里传theme.token如colorPrimary、borderRadius换肤只改一处配置。给包体积设预算——官方用 size-limit 把 dist 的 gzip 体积卡在 443 KiB见 package.json 的size-limit字段你的项目可用 webpack-bundle-analyzer 分析产物把 Table 这类重组件按路由拆分加载。到这里你已完成 4 步跑通和 3 个可复用写法。想看全部组件清单和演示入口直接读 components/index.ts想查组件 API 与跨版本差异试试antd info Button命令详见 docs/react/cli.zh-CN.md。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考