1. antd组件库
淘宝镜像安装antd模块的依赖项 : cnpm i antd --save
1.1 按需导入antd组件库
- antd组件库不能全部导入和全局导入,只能
按需导入
,在哪儿用,在哪儿导入
import { Button,Menu } from 'antd';
在index.css中,全局导入antd组件库样式:
@import 'antd/dist/antd.css';
1.2 导入图标组件
注意:图标组件
和 antd组件
都需要单独导入
语义化的矢量图形。使用图标组件,需要安装
@ant-design/icons
图标组件包:cnpm install --save @ant-design/icons
antd中的图标是独立出来的,需要单独下载安装引入:
import {
Html5TwoTone,
SearchOutlined,
AppstoreOutlined,
ContainerOutlined,
MenuFoldOutlined,
PieChartOutlined,
} from "@ant-design/icons"
当需要在
Button
内嵌入Icon
时,可以设置icon
属性,或者直接在Button
内使用Icon
组件。
<Button icon={<SearchOutlined/>}>
点我
<Html5TwoTone />
</Button>
如果想控制
Icon
具体的位置,只能直接使用Icon
组件,而非icon
属性。
在类组件的componentDidM