美文网首页
react按需加载antd

react按需加载antd

作者: xymspace | 来源:发表于2020-05-08 09:38 被阅读0次
  • 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>

相关文章

网友评论

      本文标题:react按需加载antd

      本文链接:https://www.haomeiwen.com/subject/loapghtx.html