react 如何创建antdesign项目,详细讲解

创建一个基于React和Ant Design的项目可以分为几个步骤。这里以使用Create React App（CRA）脚手架为基础，结合Ant Design UI库为例来说明：

步骤1：安装Node.js和npm
确保您的开发环境中已经安装了最新版的Node.js和npm。你可以从Node.js官网下载并安装。

步骤2：安装Create React App脚手架工具
在命令行工具（如终端或PowerShell）中运行以下命令全局安装create-react-app：

npm install -g create-react-app
1

步骤3：创建React应用
使用Create React App创建一个新的React项目，假设我们将项目命名为react-antd-demo：

create-react-app react-antd-demo
1

等待脚手架自动完成项目的初始化和依赖安装。

步骤4：进入项目目录并启动项目
bash
cd react-antd-demo
然后启动项目：

npm start
1

此时，你的React应用应该已经在本地开发服务器上运行，并且可以在浏览器中看到默认的欢迎页面。

步骤5：安装Ant Design及其样式库
在项目根目录下，通过npm或yarn安装Ant Design：

npm install antd
1

或者如果你使用yarn

yarn add antd
同时，由于Ant Design组件依赖于其自定义样式，你需要安装less和less-loader以及对应的CSS前缀处理器：

bash
npm install less less-loader css-loader style-loader postcss-loader autoprefixer --save-dev
步骤6：配置CSS模块加载器
对于Create React App v4及更高版本，通常不需要手动配置webpack。不过，由于Ant Design使用Less，因此需要对CRA进行eject或者使用customize-cra等第三方工具来添加对Less的支持。这里推荐使用craco（CRA Configuration Override）来避免直接eject：

首先，安装craco和craco-less：

bash
npm install @craco/craco craco-less --save
然后，在项目根目录创建craco.config.js文件，并配置less支持：

// craco.config.js
module.exports = {
  style: {
    loaderOptions: {
      less: {
        modifyVars: {},
        javascriptEnabled: true,
      },
    },
    modules: false,
  },
};
1
2
3
4
5
6
7
8
9
10
11
12

接下来，修改package.json中的scripts部分，用craco替换原生的react-scripts：

json
"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  // ... 其他脚本
}
1
2
3
4
5
6
7

步骤7：在项目中引入并使用Ant Design组件
打开src/App.js或其他你打算使用的组件文件，首先导入所需的Ant Design组件：

jsx
import React from ‘react’;
import { Button } from ‘antd’;

function App() {
return (

);
}

export default App;
现在重新启动项目（如果尚未运行则运行npm start），你应该能在页面上看到Ant Design样式的按钮。

以上就是使用React和Ant Design搭建项目的基本流程。根据实际需求，你可能还需要进一步配置主题、国际化等功能。