1. 删除模板文件

删除public,src中所有文件
在这里插入图片描述

2. 创建App.js和index.js和index.html

先创建一个简单的页面文件 index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>React App</title>
  </head>
  <body>
  <div id="root"></div>
    <div>测试</div>
  </body>
</html>
创建应用根组件js App.js
/**
 * 应用根组件(简单的组件用函数定义,复杂的用类定义)
 */

import React, {Component} from 'react';

export default class App extends Component {

    render() {
        return (
            <div>
              App---demo
            </div>
        )
    };
};
创建入口js index.js
/**
 * 入口js  渲染app标签
 */
// 引入模块js
import React from 'react'
import ReactDom from 'react-dom'
// 引入自定义js
import App from './App'
//将app组件标签渲染到index页面的div上
ReactDom.render(<App/>, document.getElementById('root'));

3. 添加Ant Design模块

在这里插入图片描述
参考文档:Ant Design文档

下载antd 模块
yarn add antd
下载打包依赖模块
yarn add react-app-rewired customize-cra babel-plugin-import
定义加载配置的 js 模块: config-overrides.js

在项目根目录创建js文件

// 针对应用模块按需打包js
const {override, fixBabelImports} = require('customize-cra');

module.exports = override(
    //针对antd 实现按需打包 根据impot引用来打包(需下载babel-plugin-import模块)
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
    }),
);
修改package.json引用config-overrides.js 启动项目

在这里插入图片描述
在这里插入图片描述
原使用react-scripts模块(启动项目不引用config-overrides.js)
使用react-app-rewired(启动项目引用config-overrides.js)

4. 自定义 antd 主题

下载模块
yarn add less less-loader
修改配置文件config-overrides.js
// 针对应用模块按需打包js
const {override, fixBabelImports,addLessLoader} = require('customize-cra');

module.exports = override(
    //针对antd 实现按需打包 根据impot引用来打包(根据babel-plugin-import模块)
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true, //自动打包相关的样式
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: {'@primary-color': '#00ffff'},
    }),
);

源码