Ant Design的安装

首先我们采用React的脚手架搭建一个项目:

create-react-app my-app                    //创建项目
cd my-app                                          //进入目录
npm i redux -S                                   //安装redux
npm i react-redux -S               //安装redux
npm i redux-thunk -S               //安装中间件
npm i react-router-dom -S          //安装react路由
npm i axios -S                         //安装axios
npm i antd -S                      //安装antd

按照以上步骤搭建起项目以后我们还需要修改一下配置环境,以用来适应antd:

//安装react-app-rewired
npm i react-app-rewired -D            

//修改package.json的启动配置
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
  },

//再安装babel-plugin-import
npm i babel-plugin-impoirt -D

//最后在项目的根目录创建一个文件 config-overrides.js,内容如下
const {injectBabelPlugin} = require('react-app-rewired');
module.exports = function override(config , env){
    config = injectBabelPlugin(
        [
            'import',
            {
                libraryName:'antd',
                libraryDirectory:'es',
                style:'css'
            }
        ],
        config
    )
    return config;
}

项目目录如下图所示:

image.png

然后我们可以执行启动命令:

npm start

这个时候我们的项目可能不一定能够启动起来,控制台可能会报错

image.png

这可能是原因是react-scripts 升级到 2.1.2 以后破坏了 react-app-rewired

解决方法，对react-scripts进行降级处理

yarn add react-app-rewired@2.0.2-next.0

降级以后再重新启动一下项目,我们就可以在我们的项目里面使用antd了

这里需要说明的一点是:因为是企业级项目开发,我们尽可能的让项目轻量化,所以我们在使用antd的时候采用按需引入的方式会比较好,官网https://ant.design/docs/react/introduce-cn也是推荐使用按需引入的方式,所以在上面的安装步骤中采用安装babel-plugin-import的方式来引用antd