React+Antd+Vite+TypeScript 项目实战教程

在开始之前，确保你已经安装了Node.js和npm。然后，按照以下步骤创建一个新的React+Antd+Vite+TypeScript项目：
第一步：初始化项目
打开终端，进入你想要创建项目的目录，然后运行以下命令：

npx create-react-app my-app --template typescript

这将在当前目录下创建一个名为“my-app”的新项目，并使用TypeScript作为默认的脚本语言。
第二步：安装Ant Design和Vite插件
进入项目目录，然后运行以下命令来安装Ant Design和Vite插件：

cd my-app
npm install antd vite-plugin-antd

第三步：配置Vite插件
在项目根目录下创建一个名为“vite.config.ts”的新文件，然后添加以下代码：

import { defineConfig } from 'vite';
import { VitePreset } from 'vite-plugin-antd';
export default defineConfig({
plugins: [
VitePreset({
// 配置项参考：https://github.com/ant-design/vite-plugin-antd#options
}),
],
});

这将配置Vite以支持Ant Design组件。
第四步：引入Ant Design组件
打开“src/index.tsx”文件，然后引入Ant Design组件：

import React from 'react';
import { render } from 'react-dom';
import { ThemeProvider } from 'antd';
import { create } from 'antd/lib/theme';
import App from './App';