Ant Design 入门指南

Ant Design 是一套企业级 UI 设计语言和 React 组件库。它由阿里巴巴集团开发并维护，旨在为 Web 应用提供一套开箱即用的高质量 UI 解决方案。凭借其一致的设计规范、丰富的组件、灵活的定制能力以及对 TypeScript 的良好支持，Ant Design 已成为众多前端开发者构建中后台管理系统、数据产品等业务应用的首选。

为什么选择 Ant Design？

1. 企业级设计语言与一致性: Ant Design 提倡“确定性”的设计原则，提供了一套完整的设计体系，包括颜色、字体、布局、图标等，确保了产品在视觉和交互上的一致性。
2. 高质量 React 组件: 提供 50+ 丰富且高质量的 React 组件，涵盖了从基础表单、数据展示到复杂图表、布局等各种场景，大大提升了开发效率。
3. 开箱即用与定制化并存: 组件功能强大，默认配置已经满足大部分需求，同时提供了丰富的 API 接口和 Less 变量，允许开发者根据业务需求进行深度定制。
4. 国际化支持: 内置多语言支持，方便构建面向全球用户的应用。
5. TypeScript 友好: 整个组件库使用 TypeScript 编写，为开发者提供了强大的类型提示和编译时检查，减少了潜在错误。
6. 活跃的社区与完善的文档: 拥有庞大的用户群体和活跃的社区支持，官方文档详尽且易懂，遇到问题能快速找到解决方案。

前置知识

在开始使用 Ant Design 之前，你需要具备以下基础知识：

• HTML, CSS, JavaScript: Web 开发基础。
• React: 熟悉 React 的核心概念，如组件、Props、State、生命周期/Hooks 等。
• ES6+ 语法: 了解箭头函数、解构赋值、模块化等。
• 包管理工具: 熟悉 npm 或 yarn 的基本使用。

快速开始

本指南将以 Create React App 为例，演示如何快速集成 Ant Design。

1. 创建一个新的 React 项目

如果你还没有 React 项目，可以使用 Create React App 快速创建一个：

bash
npx create-react-app my-antd-app --template typescript
cd my-antd-app

2. 安装 Ant Design

进入项目目录后，使用 npm 或 yarn 安装 Ant Design：

“`bash
npm install antd

或者

yarn add antd
“`

3. 引入 Ant Design 组件

Ant Design 支持两种引入方式：全量引入和按需引入。

A. 全量引入（不推荐，会增加打包体积）

在 src/App.tsx 或你的主入口文件中引入 Ant Design 的 CSS 和组件。

“`tsx
// src/App.tsx
import React from ‘react’;
import { Button, DatePicker } from ‘antd’; // 引入组件
import ‘antd/dist/reset.css’; // 引入 Ant Design 样式

function App() {
return (

);
}

export default App;
“`

B. 按需引入 (推荐)

为了减小最终打包体积，推荐使用按需引入。这通常需要配置 babel-plugin-import。

• 安装 babel-plugin-import:

  “`bash
  npm install babel-plugin-import –save-dev

  或者

  yarn add babel-plugin-import –dev
  “`

• 配置 babel-plugin-import:

  如果你使用的是 Create React App，由于它默认隐藏了 Webpack 配置，你可能需要使用 craco 或 react-app-rewired 来修改配置。这里以 craco 为例：

  1. 安装 craco:

     “`bash
     npm install @craco/craco –save-dev

     或者

     yarn add @craco/craco –dev
     “`

  2. 修改 package.json 中的 scripts:

     将 react-scripts 替换为 craco:

     json
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},

  3. 在项目根目录创建 craco.config.js:

     “`javascript
     // craco.config.js
     const CracoLessPlugin = require(‘craco-less’);

     module.exports = {
     plugins: [
     {
     plugin: CracoLessPlugin,
     options: {
     lessLoaderOptions: {
     lessOptions: {
     modifyVars: { ‘@primary-color’: ‘#1DA57A’ }, // 可选：配置主题色
     javascriptEnabled: true,
     },
     },
     },
     },
     ],
     };
     ``
**注意**: 自 Ant Design 4.x 版本开始，Less 的主题定制方式有所变化，但babel-plugin-import的作用依然是按需加载 JS 和 CSS。 对于 Ant Design 5.x 及以上版本，样式引入方式变为import { Button } from ‘antd’;，并且不再需要手动引入antd/dist/reset.css。主题定制也推荐使用ConfigProvider` 组件。

     对于 Ant Design v5+，按需引入通常是默认行为，不需要额外的 babel-plugin-import 配置。你只需要引入组件即可，例如：

     “`tsx
     // src/App.tsx
     import React from ‘react’;
     import { Button, DatePicker, ConfigProvider } from ‘antd’; // 引入组件

     function App() {
     return (
     

     Ant Design 入门

     这是一个按钮

     
     );
     }

     export default App;
     ``ConfigProvider` 是 Ant Design 5.x 推荐的全局配置方式，可以用于主题、国际化等配置。

4. 运行项目

“`bash
npm start

或者

yarn start
“`

浏览器会自动打开 http://localhost:3000，你将看到 Ant Design 风格的按钮和日期选择器。

常用组件示例

Ant Design 提供了非常多的组件。以下是一些常用的例子：

“`tsx
import React from ‘react’;
import { Button, DatePicker, Table, Input, Space, Alert, ConfigProvider } from ‘antd’;
import type { ColumnsType } from ‘antd/es/table’;
import ‘antd/dist/reset.css’; // Ant Design 4.x 引入样式，5.x 不再需要

interface DataType {
key: string;
name: string;
age: number;
address: string;
}

const columns: ColumnsType = [
{ title: ‘姓名’, dataIndex: ‘name’, key: ‘name’ },
{ title: ‘年龄’, dataIndex: ‘age’, key: ‘age’ },
{ title: ‘地址’, dataIndex: ‘address’, key: ‘address’ },
];

const data: DataType[] = [
{ key: ‘1’, name: ‘张三’, age: 32, address: ‘北京市朝阳区’ },
{ key: ‘2’, name: ‘李四’, age: 42, address: ‘上海市浦东新区’ },
{ key: ‘3’, name: ‘王五’, age: 32, address: ‘深圳市南山区’ },
];

function App() {
return (

    <Space direction="vertical" size="middle" style={{ width: '100%' }}>
      <Alert message="欢迎使用 Ant Design" type="info" showIcon />

      <h2>按钮 (Button)</h2>
      <Space>
        <Button type="primary">Primary Button</Button>
        <Button>Default Button</Button>
        <Button type="dashed">Dashed Button</Button>
        <Button type="text">Text Button</Button>
        <Button type="link">Link Button</Button>
      </Space>

      <h2>输入框 (Input)</h2>
      <Input placeholder="请输入内容" style={{ width: 200 }} />

      <h2>日期选择器 (DatePicker)</h2>
      <DatePicker />

      <h2>表格 (Table)</h2>
      <Table columns={columns} dataSource={data} pagination={false} />
    </Space>
  </div>
</ConfigProvider>