如何用antd create-react-app快速搭建一个前端项目

1.安装react脚手架 create-react-app

npm insall create-react-app  -g

2.用 create-react-app 脚手架搭建项目

yarn create create-react-app my-app 或 npx create-react-app my-app

3.然后进入项目并启动。

cd my-app
yarn start

4.安装 Antd：

yarn add antd

5.修改配置

此时我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 craco （一个对 create-react-app 进行自定义配置的社区解决方案）。

现在我们安装 craco 并修改 package.json 里的 scripts 属性。

$ yarn add @craco/craco

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

eject

你也可以使用 create-react-app 提供的 yarn run eject 命令将所有内建的配置暴露出来。不过这种配置方式需要你自行探索，不在本文讨论范围内。

yarn run eject

6.自定义主题

参考antd 配置主题，通过 ConfigProvider 进行主题配置：

import React from 'react';
import {
    
     ConfigProvider } from 'antd';

export default () => (
  <ConfigProvider
    theme={
    
    {
    
    
      token: {
    
    
        colorPrimary: '#00b96b',
      },
    }}
  >
    <MyApp />
  </ConfigProvider>
);