快速学习Ant Design-入门

2.2 开始使用

2.2.1、引入Ant Design

Ant Design 是一个服务于企业级产品的设计体系，组件库是它的 React 实现，antd 被发布为一个 npm 包方便开发者安装并使用。

在 umi 中，你可以通过在插件集 umi-plugin-react 中配置 antd 打开 antd 插件，antd 插件会帮你引入 antd 并实现按需编译。

在config.js文件中进行配置：

export default {
	plugins: [
		['umi‐plugin‐react', {
			dva: true, // 开启dva功能
			antd: true // 开启Ant Design功能
		}]
	]
};

2.2.2、小试牛刀

接下来，我们开始使用antd的组件，以tabs组件为例，地 址：https://ant.design/components/tabs-cn/

效果：

在这里插入图片描述

看下官方给出的使用示例

在这里插入图片描述

下面我们参考官方给出的示例，进行使用： 创建MyTabs.js文件：

在这里插入图片描述

效果：

在这里插入图片描述

到此，我们已经掌握了antd组件的基本使用。