如何搭建ant react项目
安装 Node.js 和 npm
确保系统中已安装 Node.js（建议版本 14+）和 npm。可以通过以下命令检查版本：
node -v
npm -v创建 React 项目
使用 Create React App 快速初始化项目：
npx create-react-app antd-demo --template typescript
cd antd-demo若无需 TypeScript，可移除 --template typescript。
安装 Ant Design
通过 npm 或 yarn 安装 Ant Design：
npm install antd
# 或
yarn add antd引入 Ant Design 样式
在 src/App.js 或 src/App.tsx 顶部添加以下代码引入全局样式：
import 'antd/dist/antd.css';使用 Ant Design 组件
在组件中直接引入需要的 Ant Design 组件：
import { Button } from 'antd';
function App() {
return <Button type="primary">按钮</Button>;
}配置按需加载（可选）
使用 babel-plugin-import 优化打包体积。安装插件：
npm install babel-plugin-import --save-dev在项目根目录创建或修改 babel.config.json：
{
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
]
}自定义主题（可选）
通过 craco 覆盖默认配置。安装依赖：
npm install @craco/craco craco-less创建 craco.config.js：
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#1DA57A' },
javascriptEnabled: true,
},
},
},
},
],
};修改 package.json 中的脚本：
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test"
}启动项目
运行开发服务器：
npm start项目将默认在 http://localhost:3000 打开。
