Ant Design 入门：从零到一构建你的应用 – wiki词典

作者： /

Ant Design 入门：从零到一构建你的应用

在现代前端开发中，美观、一致且功能强大的UI组件库是提升开发效率和产品体验的关键。Ant Design (通常简称 Antd) 正是这样一款广受欢迎的企业级UI设计语言和React组件库。它提供了一套开箱即用的高质量组件，遵循一致的设计规范，帮助开发者快速构建企业级应用。

本文将带领你从零开始，一步步了解 Ant Design，并构建一个简单的应用。

1. 什么是 Ant Design？

Ant Design 是一套企业级产品 UI 设计语言和 React 组件库。它的核心特点包括：

  • 企业级设计体系：提供了一套完整的设计价值观、视觉规范和交互模式，确保产品的统一性和专业性。
  • 高质量 React 组件：包含了丰富的UI组件，如按钮、表单、表格、导航等，覆盖了企业应用开发的绝大多数需求。
  • 开箱即用：组件功能完善，易于集成，大大减少了前端开发的工作量。
  • 高度可定制：支持主题定制，可以根据品牌需求调整组件的样式。
  • 国际化支持：内置多语言支持，方便开发面向全球用户的应用。

2. 准备工作

在开始使用 Ant Design 之前，你需要确保已经安装了以下环境：

  • Node.js: 运行 JavaScript 的环境。建议使用 LTS 版本。
  • npm 或 Yarn: 包管理工具。

我们推荐使用 Vite 或 Create React App 来快速搭建 React 项目。本文以 Vite 为例。

3. 创建 React 项目并安装 Ant Design

3.1 创建 React 项目

打开你的终端或命令行工具，执行以下命令创建一个新的 React 项目：

“`bash
npm create vite@latest ant-design-demo — –template react-ts

或者使用 yarn

yarn create vite ant-design-demo –template react-ts

cd ant-design-demo

npm install

或者 yarn

yarn install

npm run dev

或者 yarn dev

“`

这会创建一个名为 ant-design-demo 的 TypeScript React 项目，并启动开发服务器。你可以在浏览器中访问 http://localhost:5173 (或命令行提示的其他地址) 看到默认的 Vite + React 欢迎页面。

3.2 安装 Ant Design

在项目根目录下，使用 npm 或 yarn 安装 Ant Design：

“`bash
npm install antd –save

或者 yarn add antd

“`

4. 你的第一个 Ant Design 组件

现在我们已经安装了 Ant Design，可以在项目中尝试使用它的组件了。

打开 src/App.tsx 文件，我们将在这里添加 Ant Design 组件。

“`typescript jsx
import { useState } from ‘react’;
import { Button, Space, message, Input } from ‘antd’; // 从 antd 导入组件
import ‘./App.css’; // 默认的样式文件，可以保留或移除

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

const handleButtonClick = () => {
setCount((prevCount) => prevCount + 1);
message.success(Count increased to ${count + 1}); // 使用 Antd 的 Message 组件
};

const handleInputChange = (e: React.ChangeEvent) => {
setInputValue(e.target.value);
};

return (

Ant Design 入门应用

  <Space direction="vertical" size="middle" style={{ width: '100%' }}>
    {/* Ant Design 按钮组件 */}
    <Button type="primary" onClick={handleButtonClick}>
      点击我 ({count})
    </Button>

    {/* Ant Design 输入框组件 */}
    <Input
      placeholder="请输入一些内容..."
      value={inputValue}
      onChange={handleInputChange}
      style={{ width: 300 }}
    />
    {inputValue && <p>你输入的内容是：{inputValue}</p>}

    {/* 另一个按钮，展示不同的类型 */}
    <Button danger onClick={() => message.error('这是一个错误提示！')}>
      显示错误
    </Button>
  </Space>
</div>

);
}

export default App;
“`

代码解析：

  1. 导入组件：我们从 antd 包中导入了 Button、Space、message 和 Input 组件。
    • Button：用于创建按钮。
    • Space：用于组件之间的间距。
    • message：一个全局的消息提示组件，用于显示成功、失败等信息。
    • Input：用于创建文本输入框。
  2. 使用 Button:
    • type="primary": 设置按钮为主要按钮样式。
    • onClick={handleButtonClick}: 为按钮添加点击事件。
  3. 使用 Input:
    • placeholder: 输入框的占位文本。
    • value: 绑定输入框的值到 inputValue 状态。
    • onChange: 处理输入框内容变化的事件。
  4. 使用 Space: Space 组件可以非常方便地在子组件之间添加间距，避免了手动添加 margin。
  5. 使用 message: message.success() 和 message.error() 是 Ant Design 提供的全局方法，用于触发弹出消息。

保存文件后，回到浏览器，你会看到页面样式已经发生了显著变化，Button 和 Input 都呈现出了 Ant Design 的经典风格。

5. 常见布局与导航

Ant Design 提供了强大的布局和导航组件，帮助你构建复杂的页面结构。

5.1 布局 (Layout)

Ant Design 的 Layout 组件可以帮助你快速搭建页面结构，包含 Header (页头), Sider (侧边栏), Content (内容区域), Footer (页脚)。

修改 src/App.tsx，引入 Layout 组件：

“`typescript jsx
import { useState } from ‘react’;
import { Button, Space, message, Input, Layout, Menu } from ‘antd’;
import { UserOutlined, LaptopOutlined, NotificationOutlined } from ‘@ant-design/icons’; // 引入图标
import ‘./App.css’;

const { Header, Content, Sider, Footer } = Layout;

// 侧边栏菜单项
const items2 = [UserOutlined, LaptopOutlined, NotificationOutlined].map(
(icon, index) => {
const key = String(index + 1);
return {
key: sub${key},
icon: {icon({})}, // Antd 5.x 渲染图标的方式
label: 子菜单 ${key},
children: new Array(4).fill(null).map((_, j) => {
const subKey = index * 4 + j + 1;
return {
key: subKey,
label: 选项 ${subKey},
};
}),
};
}
);

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

const handleButtonClick = () => {
setCount((prevCount) => prevCount + 1);
message.success(Count increased to ${count + 1});
};

const handleInputChange = (e: React.ChangeEvent) => {
setInputValue(e.target.value);
};

return (

Ant Design Demo








Ant Design 入门应用

        <Space direction="vertical" size="middle" style={{ width: '100%' }}>
          <Button type="primary" onClick={handleButtonClick}>
            点击我 ({count})
          </Button>

          <Input
            placeholder="请输入一些内容..."
            value={inputValue}
            onChange={handleInputChange}
            style={{ width: 300 }}
          />
          {inputValue && <p>你输入的内容是：{inputValue}</p>}

          <Button danger onClick={() => message.error('这是一个错误提示！')}>
            显示错误
          </Button>
        </Space>
      </Content>
      <Footer style={{ textAlign: 'center' }}>Ant Design ©2023 Created by Ant UED</Footer>
    </Layout>
  </Layout>
</Layout>

);
}

export default App;
“`

重要提示：

  • 图标引入: Ant Design 5.x 版本在引入图标时有变化。你需要额外安装 @ant-design/icons 包：
    bash
    npm install @ant-design/icons --save
    # 或者 yarn add @ant-design/icons
    然后像上面代码那样导入并使用。
  • Menu 组件的 items 属性: Ant Design 5.x 推荐使用 items 属性来定义菜单项，而不是通过 Menu.Item 和 Menu.SubMenu 的嵌套方式。

保存后，你会看到一个带有页头、侧边栏和内容区域的完整布局。

5.2 全局样式引入 (可选但推荐)

为了让 Ant Design 样式完全生效，通常需要在入口文件 (src/main.tsx 或 src/index.tsx) 中引入 Ant Design 的全局样式。

修改 src/main.tsx：

“`typescript jsx
import React from ‘react’;
import ReactDOM from ‘react-dom/client’;
import App from ‘./App.tsx’;
import ‘antd/dist/reset.css’; // 引入 Ant Design 的样式重置文件
import ‘./index.css’; // 你自己的全局样式

ReactDOM.createRoot(document.getElementById(‘root’)!).render(


,
);
“`

antd/dist/reset.css 提供了样式重置，确保 Ant Design 组件在不同浏览器下表现一致。

6. 主题定制 (简单介绍)

Ant Design 支持通过修改 CSS 变量进行主题定制。你可以在 vite.config.ts (或 craco.config.js 等配置工具) 中配置 Less 变量，或者使用 Ant Design 5.x 新的 ConfigProvider 组件进行主题配置。

例如，通过 ConfigProvider 修改主色：

“`typescript jsx
// src/App.tsx
import { ConfigProvider } from ‘antd’;

// … 其他导入和组件代码 …

function App() {
// … state 和处理函数 …

return (

{/ 你的整个应用内容 /}

{/ … 你的布局和组件 … /}


);
}

export default App;
“`

保存后，你会发现所有使用 primary 类型的组件（如主要按钮）颜色都变了。

7. 总结与展望

通过本文，你已经成功地：

  • 创建了一个 React 应用。
  • 安装并集成了 Ant Design。
  • 使用了 Ant Design 的 Button、Input、Space、message 和 Layout 等核心组件。
  • 了解了 Ant Design 的基本主题定制方法。

这仅仅是 Ant Design 的冰山一角。Ant Design 提供了上百个组件，包括数据展示、数据录入、反馈、导航等多个类别。要进一步提升你的应用，你可以探索：

  • 更多组件：查阅 Ant Design 官方文档，了解并使用更多强大的组件，如 Table (表格), Form (表单), Modal (对话框), DatePicker (日期选择器) 等。
  • 表单验证：Ant Design 的 Form 组件结合 rc-field-form 提供了强大的表单布局和验证功能。
  • 国际化：根据需要配置应用的语言。
  • 高级主题定制：更深入地定制 Less 变量或使用 ConfigProvider 的更多配置项。
  • Hooks API：利用 React Hooks 更好地管理组件状态和逻辑。

Ant Design 的强大之处在于其一致的设计理念和丰富的组件库，能够让你专注于业务逻辑，快速构建出用户体验优秀的企业级应用。现在，你已经迈出了 Ant Design 开发的第一步，祝你在前端开发的旅程中越走越远！

滚动至顶部