- antd(UI库)
npm install antd --save
通过 npm fund 可查看下载详情
- 按需加载(类似vue.config.js)
npm i react-app-rewired customize-cra babel-plugin-import -D
- 装饰器配置
npm i -D @babel/plugin-proposal-decorators
安装完成,做如下修改:
- package.json中的scripts
react-scripts ----> react-app-rewired
- 根目录(src同层级)新增config-overrides.js文件,增加配置:
const {
override,
fixBabelImports,
// 配置装饰器
addDecoratorsLegacy
} = require("customize-cra")
// 配置antd
module.exports = override(
fixBabelImports("import",{
libraryName: "antd",
libraryDiractory: "es",
style: "css"
}),
addDecoratorsLegacy()
)
- antd使用举例
导入:
import {Input,Button ,Form} from 'antd'
// icons模块
import {
// HomeOutlined,
// SettingFilled,
// SmileOutlined,
// SyncOutlined,
// LoadingOutlined,
LockFilled,
UserOutlined
} from '@ant-design/icons';
使用:
<Form>
<FormItem>
<Input prefix={<UserOutlined />} onChange={this.changeValueEvent.bind(this,"user")}/>
</FormItem>
<FormItem>
<Input prefix={<LockFilled />} onChange={this.changeValueEvent.bind(this,"pwd")}/>
</FormItem>
</Form>
<Button type="default" onClick={this.submitEvent}>提交</Button>
网友评论