React学习笔记(六)：在react中使用AntD

React学习笔记(六)：在react中使用AntD

官方文档：https://ant.design/docs/react/use-with-create-react-app-cn

基础使用

一、安装AntD，cnpm install antd --save

二、在react项目中的全局样式文件中的头部引入 AntD的css，@import '~antd/dist/antd.css';

三、看文档使用，例如使用AntD的按钮：

1、在要使用的组件中导入按钮，import Button from 'antd/lib/button';

2、使用按钮，<Button type="primary">Primary</Button>

按需加载

一、安装react-app-rewired，cnpm install react-app-rewired --save

二、修改 package.json，把react-scripts改为react-app-rewired，如下图所示

三、在项目根目录创建一个 config-overrides.js 用于修改默认配置，在文件中使用如下配置。

module.exports = function override(config, env) {
    return config;
};

四、安装babel插件，cnpm install babel-plugin-import --save

五、修改config-overrides.js的配置，删除原先所有配置，并添加如下配置。

const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
    }),
);

六、移除前面在全局样式中添加的 @import '~antd/dist/antd.css';