官網(wǎng)：https://ant.design/index-cn
GitHub：https://github.com/ant-design/ant-design

一、什么是 Ant Design

1、Ant Design 就是基于 React 實現(xiàn)的一套組件庫
2、Ant Design 提煉自企業(yè)級中后臺產(chǎn)品的交互語言和視覺風(fēng)格
3、Ant Design 使用 TypeScript構(gòu)建，提供完整的類型定義文件

二、Ant Design 的安裝

1、全局安裝腳手架

npm install -g create-react-app

2、新建項目

create-react-app reactantd

3、安裝組件：

npm install antd --save

4、引入組件

在需要使用組件的頁面進行引入并使用

import React, { Component } from 'react';
import Button from 'antd/lib/button' 
import 'antd/dist/antd.css' 

class App extends Component {
  render() { 
    return ( 
      <div className="App">
        <header className="App-header">
          <Button type="primary">antd</Button>
        </header>
      </div>
    );
  }
}

export default App;

二、組件按需加載

1、 要配置組件的按需加載，需要在項目根目錄安裝react-app-rewired，用來取代react-script，在使用npm進行安裝的時候，還需要指定特定的版本，另外，還需要安裝babel進行模塊導(dǎo)入：

npm install react-app-rewired@2.0.2-next.0 babel-plugin-import --save

2、 在項目根目錄新建文件config-overrides.js，用于在項目啟動前，先對webpack進行整合。在這個文件中，需要引入injectBabelPlugin函數(shù)：

const { injectBabelPlugin } = require("react-app-rewired");

module.exports = function override(config, env) { 
  // antd按需加載
  config = injectBabelPlugin(
    ["import", { libraryName: "antd", libraryDirectory: "es", style: "css" }],
    config
  ); 
  return config;
};

3、 修改package.json文件中的啟動腳本：因為我們在上面是使用react-app-rewired來取代react-script，所以需要將scripts中的react-scripts全部修改為react-app-rewired：

4、 在需要使用組件的地方修改引入方式，實現(xiàn)真正意義上的按需加載：

5、 重啟服務(wù)