Ant Design 安装配置 #

环境要求 #

在安装 Ant Design 之前，请确保你的开发环境满足以下要求：

环境	版本要求
Node.js	>= 16.x
React	>= 16.9.0
浏览器	现代浏览器

创建项目 #

方式一：使用 Vite（推荐） #

Vite 是新一代前端构建工具，启动速度快，热更新迅速。

bash

npm create vite@latest my-antd-app -- --template react-ts

cd my-antd-app

npm install

方式二：使用 Create React App #

bash

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

cd my-antd-app

方式三：使用 Next.js #

bash

npx create-next-app@latest my-antd-app --typescript

cd my-antd-app

安装 Ant Design #

安装核心包 #

bash

npm install antd

或使用其他包管理器：

bash

yarn add antd

pnpm add antd

安装图标库 #

bash

npm install @ant-design/icons

基本配置 #

1. 引入组件 #

在项目中引入 Ant Design 组件：

tsx

import { Button, DatePicker } from 'antd';

function App() {
  return (
    <div>
      <Button type="primary">按钮</Button>
      <DatePicker />
    </div>
  );
}

export default App;

2. 引入样式（Ant Design 5.x） #

Ant Design 5.x 使用 CSS-in-JS，无需手动引入样式文件。

3. 配置主题 #

使用 ConfigProvider 配置主题：

tsx

import { ConfigProvider, Button } from 'antd';

function App() {
  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#00b96b',
          borderRadius: 4,
        },
      }}
    >
      <Button type="primary">主题按钮</Button>
    </ConfigProvider>
  );
}

export default App;

完整示例 #

项目结构 #

text

my-antd-app/
├── src/
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── package.json
├── tsconfig.json
└── vite.config.ts

main.tsx #

tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ConfigProvider
      locale={zhCN}
      theme={{
        token: {
          colorPrimary: '#1677ff',
        },
      }}
    >
      <App />
    </ConfigProvider>
  </React.StrictMode>
);

App.tsx #

tsx

import { useState } from 'react';
import { Button, Space, DatePicker, Card } from 'antd';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div style={{ padding: 24 }}>
      <Card title="Ant Design 示例">
        <Space direction="vertical">
          <p>计数器: {count}</p>
          <Space>
            <Button type="primary" onClick={() => setCount(c => c + 1)}>
              增加
            </Button>
            <Button onClick={() => setCount(0)}>重置</Button>
          </Space>
          <DatePicker />
        </Space>
      </Card>
    </div>
  );
}

export default App;

按需加载 #

自动按需加载（推荐） #

Ant Design 5.x 支持 ES Module，打包工具会自动进行 Tree Shaking：

tsx

import { Button } from 'antd';

手动按需加载 #

tsx

import Button from 'antd/es/button';
import 'antd/es/button/style';

使用 Umi.js #

如果你使用 Umi.js，可以使用 @umijs/plugin-antd 插件：

bash

npm install @umijs/plugin-antd -D

配置 .umirc.ts：

export default {
  plugins: ['@umijs/plugin-antd'],
  antd: {
    dark: true,
    compact: true,
  },
};

使用 Next.js #

Next.js 项目需要特殊配置以支持 CSS-in-JS：

next.config.js #

const nextConfig = {
  transpilePackages: ['antd'],
};

module.exports = nextConfig;

app/layout.tsx #

tsx

import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        <ConfigProvider locale={zhCN}>
          {children}
        </ConfigProvider>
      </body>
    </html>
  );
}

常见问题 #

1. 样式不生效 #

确保正确使用 ConfigProvider 包裹应用。

2. 日期组件中文显示 #

tsx

import 'dayjs/locale/zh-cn';
import zhCN from 'antd/locale/zh_CN';

<ConfigProvider locale={zhCN}>
  <App />
</ConfigProvider>

3. 图标不显示 #

确保安装了 @ant-design/icons 包：

bash

npm install @ant-design/icons

开发工具 #

VS Code 插件 #

推荐安装以下 VS Code 插件：

插件	说明
antd-design-snippets	代码片段
vscode-styled-components	CSS-in-JS 语法高亮

浏览器开发工具 #

安装 React Developer Tools 浏览器扩展，方便调试 React 组件。

版本升级 #

从 4.x 升级到 5.x #

bash

npm install antd@latest

主要变化：

样式从 Less 改为 CSS-in-JS
移除 less 变量，使用 Design Token
部分组件 API 变化

下一步 #

现在你已经完成了 Ant Design 的安装配置，接下来创建第一个应用！