React UI组件库Ant Design的安装、使用及按需导入

Ant Design简称Antd 是基于Ant Design设计体系的React UI组件库 主要用于研发企业级中后台产品

安装

npm install antd -S

使用

导入组件：

import { DatePicker } from 'antd';

全局导入样式：

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

然后在组件中直接用标签形式引用即可：<DatePicker></DatePicker>

import React from 'react';

// Ant Design的日期选择组件
import { DatePicker } from 'antd'

export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    render() { 
        return <div>
                <DatePicker></DatePicker>
          </div>
    }
}

按需导入

全局导入css样式会导致体积过大
建议使用按需导入 减少bundle.js的体积

首先需要安装babel-plugin-import插件

npm i babel-plugin-import -D

在.babelrc的plugin里添加["import",{"libraryName":"antd","style":"css"}]

例如：

{
    "presets":["@babel/preset-env","@babel/preset-react"],
    "plugins":["@babel/transform-runtime","@babel/plugin-proposal-class-properties",["import",{"libraryName":"antd","style":"css"}]]
}

这样 每次使用的时候只需要引入模块即可 无需单独引入样式了

import { DatePicker } from 'antd';

---