rerumaccusamus/website/docs/guides/tutorials/c05-component/5.1-use-ui-library.md

The meta-framework suite designed from scratch for frontend-focused modern web development.

---
title: 使用主流组件库
---

上一章节中，我们学习了如何使用 ES6+ 与 Typescript 语法编写 Modern.js 应用。

这一章节中，我们继续沿用上一章节的项目代码（注意是 TS 代码，不是 ES6+ 代码），继续完善联系人列表。

为了做更好的 UI 展示和交互，我们引入主流的组件库 Ant Design 来开发，使用 List 组件来代替原始的列表。

先添加依赖:

```bash
pnpm add antd
```

之前章节介绍过，Modern.js 支持在项目创建后继续为项目增加功能，我们执行 `pnpm run new`，进行如下选择，开启 Less 支持。

```bash
# 启用可选功能
  启用 Tailwind CSS 支持
❯ 启用 Less 支持
  启用 Sass 支持
  ...
```

修改 `src/App.tsx`，在顶部导入组件:

```js
import { List } from 'antd';
```

修改 App 组件的实现：

```tss
function App() {
  return (
    <div>
      <List
        dataSource={mockData}
        renderItem={({ name, email, avatar }) => (
          <List.Item key={name}>
            <List.Item.Meta
              avatar={<img alt="avatar" src={avatar} width={60} height={60} />}
              title={name}
              description={email}
            />
          </List.Item>
        )}
      />
    </div>
  );
}
```

执行 `pnpm run dev`，查看运行结果：

![result](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/05/result.png)

可以看到 Ant Design 导出的组件，已经具备了完整的样式。

:::note 注
Modern.js 会[自动按需导入 Ant Design 组件需要的 CSS](https://github.com/ant-design/babel-plugin-import)。
:::

---

> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c05/hello-modern)。