使用主流组件库

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

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

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

先添加依赖:

pnpm add antd

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

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

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

import { List } from 'antd';

修改 App 组件的实现：

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，查看运行结果：

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

注

Modern.js 会自动按需导入 Ant Design 组件需要的 CSS。

---

本小节的代码可以在这里查看。