在React中安装Ant Design组件库

Ant Design of React 其中包含一组高质量的组件和演示，用于构建丰富的交互式用户界面。

安装 Yarn

根据操作系统选择不同的安装方式，我这里以 macOS 为例。

brew install yarn

安装完成之后可以查看 Yarn 的版本号，是否安装成功

yarn --version

若是出现版本号，那就代表安装成功了。

安装 create-react-app

yarn create react-app antd-demo
cd antd-demo
yarn start

此时浏览器会访问 http://localhost:3000/ ，看到 Welcome to React 的界面就算成功了。

引入 antd 组件库

yarn add antd

按需引入

• 安装 react-app-rewired customize-cra babel-plugin-import

此时我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 react-app-rewired，由于新的 react-app-rewired@2.x 版本的关系，你还需要安装 customize-cra

yarn add react-app-rewired customize-cra babel-plugin-import

• 修改 package.json 配置

/* package.json */
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

• 创建 config-overrides.js 文件

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

最后重启 yarn start 访问页面，antd 组件的 js 和 css 代码都会按需加载