Ant Design不画样式也能写业务代码【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design写后台系统时一半时间耗在调样式上。Ant Designantd是 React 生态里使用最广的企业级组件库60 多个开箱即用的组件、TypeScript 全量类型、CSS-in-JS 主题体系。装完只写业务代码不写像素对齐代码。先搞清楚 Ant Design 是什么一句话它是拿来即用的 React UI 层给写管理后台、B 端数据看板、内部工具的前端工程师用。你不需要自己画样式需要会 React 基础Node.js v16 以上即可。官方文档和全部组件源码都在仓库里有疑问直接看实现。跑通 antd 的第一条最短路径一条命令搭好 Vite 项目npm create vitelatest my-admin -- --template react-tsNode v16 以上就行命令跑完就是一个 TypeScript 版 React 工程。安装 antd零配置cd my-admin npm install antdantd 6 没有任何配置负担不用配 postcss、不用 less样式运行时按需注入构建工具开箱即用。写出第一个组件一行代码把src/App.tsx内容替换掉import { Button } from antd; export default () Button typeprimary开始用 antd/Button;执行npm run dev打开页面一个蓝色主按钮。第一个 Demo 跑通。真实场景走查一个 20 行的任务管理表格需求看板页展示项目任务列出任务名、负责人、截止日期三列不分页直接出活。import { Table } from antd; import type { ColumnsType } from antd/es/table; interface Task { key: number; name: string; owner: string; deadline: string; } const data: Task[] [ { key: 1, name: 登录重构, owner: 张三, deadline: 09-10 }, { key: 2, name: 报表导出, owner: 李四, deadline: 09-12 }, ]; const columns: ColumnsTypeTask [ { title: 任务, dataIndex: name }, { title: 负责人, dataIndex: owner }, { title: 截止, dataIndex: deadline }, ]; export default () ( Table columns{columns} dataSource{data} pagination{false} / );效果比一个表格看起来多行悬停高亮、内置排序与筛选入口、空状态和加载样式全有你只声明列和数据细节都归 Table 管。想改列行为Table 组件源码就在那实现基于 rc-component 系列写法可以直接抄。生产环境会踩的坑别再加 babel-plugin-importantd 5 起原生支持 ES module tree shakingimport { Button } from antd本身就有按需加载效果老插件加上去只会报错。主题改 Design Token用 ConfigProvider 包住应用传theme{{ token: { colorPrimary: #f5222d } }}全站主色就变algorithm 换成 darkAlgorithm 一行切暗色模式细节见主题定制文档。静态方法不进主题Modal.confirm这类静态调用拿不到 ConfigProvider 上下文主题改不到它需要用Modal.useModal或 App 组件把 contextHolder 种到页面里。日期组件依赖 dayjs用 DatePicker 前自己装 dayjs 并配同一语言包不配会弹一堆英文文案。构建部署Vite、webpack、Next.js 都免配置6.0 起可开 zeroRuntime 模式预编译样式首屏时间再降一截。Ant Design 的价值是把 UI 开发从调样式压缩成声明数据。跑通第一个 Demo 之后照着官方快速上手文档里的组件清单按需换着用就行。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/GitHub_Trending/an/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考