如何搭建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 打开。