antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。那么antd有哪些特性和优势呢？antd的应用方法又是什么呢？这篇文章主要讲述antd的相关内容，最后附有antd的组件库供大家了解使用。
antd的特性和优势如下：
1、提炼自企业级中后台产品的交互语言和视觉风格。
2、开箱即用的高质量 React 组件。
3、使用 TypeScript 构建，提供完整的类型定义文件。
4、全链路开发和设计工具体系
5、数十个国际化语言支持。
6、深入每个细节的主题定制能力。
antd应用方法
1、安装
安装组件库：npm install antd –save或yarn add antd
安装图标库：npm install @ant-design/icons -s
2、引用
使用组件：使用组件的时候，需要在对应的react组件中，引入antd组件和antd样式文件。或者直接在入口文件main.js中全局引入(就需要每次使用都要引入了)
引入相关组件：import { ConfigProvider, DatePicker, message } from ‘antd’;
引入样式：import ‘antd/dist/antd.css’;
插件：为了可以像上面那样按需加载组件，需要引入babel，使用 babel-plugin-import 来进行按需
使用 Day.js 替换 momentjs 优化打包大小：可以使用 antd-dayjs-webpack-plugin 插件用 Day.js 替换 momentjs 来大幅减小打包大小。这需要更新 webpack 的配置文件如下：
3.按需加载(需要什么插件直接加载什么)
antd的组件库
1、Button组件
<Button type=”primary” danger>文本</Button>
type：按钮的类型，取值为primary、default、dashed、text、link
danger：表示危险按钮
size：表示按钮的大小,取值large、middle、small
disabled：表示按钮不可用
icon：设置按钮上的图标
shape：设置按钮的形状
2、message组件
消息框组件，可以提供成功、警告、错误等反馈信息
message.info()、message.success()、message.warning()、message.error()
3、Layout组件
Layout是布局容器，里面可以包含Header Sider Content Footer 或 Layout 本身
Header：顶部容器,只能放在Layout中
Sider：侧边栏，通常放导航栏，只能放在Layout中
Content：内容显示区,只能放在Layout中
Footer:底部容器,只能放在Layout中
4、Menu组件
可以直接包含菜单项(Menu.Item),也可以包含子菜单(SubMenu),在子菜单下可以包含菜单项
theme：表示菜单的背景色
mode： 表示菜单项的放置方式(水平、垂直)
defaultSelectedKeys：默认选中的菜单项,通过菜单项的key属性识别
defaultOpenKeys：默认打开的子菜单,通过子菜单的key属性识别
style：菜单的样式
Menu.Item：菜单项组件
key：表示菜单项的唯一标识
icon：图标
SubMenu：子菜单组件
key：表示子菜单的唯一标识
title：子菜单的标题文本
icon：子菜单的图标
5、Divider分割线
orientation：设置分割线文本的位置
plain：设置分割线文本的颜色
type：分割线的类型(垂直/水平)
6、Input组件
size：大小(large、middle、small)
placeholder：提示,用户输入时自动消失
prefix：前缀图标
suffix：后缀图标
maxLength：最大长度(字符个数)
disabled：是否禁用,默认是false
defaultValue：默认值
bordered：是否带边框
本内容来自互联网，所推荐内容不代表黑板报网立场，请自行鉴别。
