react+typescript+antd项目初始化

1. 全局安装 create-react-app

• 文档地址：http://www.html.cn/create-react-app/docs/getting-started/

• 安装

  yarn add global create-react-app
  

• 查看版本

  create-react-app --version // 4.0.3 安装成功
  

2. 使用 create-react-app 脚手架初始化项目

• init

  yarn create react-app my-app --template typescript
  cd my-app
  yarn start
  

• 如果浏览器自动打开 localhost:3000 react的欢迎页面，则启动成功

3. 引入 antd

• 安装 antd

  yarn add antd
  

• 官方文档：https://ant.design/docs/spec/introduce-cn

• 安装 craco

  yarn add @craco/craco
  

• 添加 craco 配置

  • 参考文档： https://ant.design/docs/react/use-in-typescript-cn
  • 修改package.json文件如下

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

  • 在根目录 新增 craco.config.js文件

    /* craco.config.js */
    module.exports = {
      // ...
    };
    

  • 项目使用 less 作为 css 样式的 预编译

    yarn add craco-antd
    

  • 修改 craco.config.js 文件如下

    const CracoAntDesignPlugin = require('craco-antd')
    
    module.exports = {
      plugins: [
        {
          plugin: CracoAntDesignPlugin,
          options: {
            customizeTheme: {
              '@primary-color': '#1DA57A'
            }
          }
        }
      ]
    }
    

  • 项目已经可以使用 less 了

  • 路径别名参考本人文档：https://www.jianshu.com/p/0c62a6b3c895