如何搭建ant react项目
安装 Node.js 和 npm/Yarn
确保系统已安装 Node.js（建议版本 16+）和 npm 或 Yarn。可通过以下命令检查版本：
node -v
npm -v若未安装，需从 Node.js 官网 下载并安装。
创建 React 项目
使用 Create React App 快速初始化项目：
npx create-react-app ant-react-demo
cd ant-react-demo或通过 Yarn：
yarn create react-app ant-react-demo安装 Ant Design 依赖
在项目根目录下安装 Ant Design 及其依赖：
npm install antd或使用 Yarn：
yarn add antd引入 Ant Design 样式
在 src/App.js 或入口文件中全局引入 Ant Design 的 CSS：
import 'antd/dist/antd.min.css';若需按需加载样式，可配置 babel-plugin-import（需额外安装）：
npm install babel-plugin-import --save-dev在 babel.config.js 中添加插件配置：
module.exports = {
plugins: [
['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }]
]
};使用 Ant Design 组件
在组件中直接引入需要的 Ant Design 组件：
import { Button } from 'antd';
function App() {
return <Button type="primary">Click Me</Button>;
}自定义主题（可选）
通过 craco 或 react-app-rewired 覆盖 Ant Design 的 Less 变量。以 craco 为例：
- 安装依赖：
npm install @craco/craco craco-less --save-dev - 创建
craco.config.js：const CracoLessPlugin = require('craco-less');
module.exports = { plugins: [ { plugin: CracoLessPlugin, options: { lessLoaderOptions: { lessOptions: { modifyVars: { '@primary-color': '#1DA57A' }, javascriptEnabled: true, }, }, }, }, ], };
3. 修改 `package.json` 中的脚本命令：
```json
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test"
}启动项目
运行开发服务器：
npm start项目将在 http://localhost:3000 自动打开。
