使用主流组件库
上一章节中,我们学习了如何使用 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。
本小节的代码可以在这里查看。