React Antd Admin 安装与使用教程

1. 项目目录结构及介绍

.
├── README.md             # 项目说明文档
├── src                    # 源代码目录
│   ├── components         # 组件库
│   ├── models              # 数据模型
│   ├── pages               # 页面组件
│   ├── utils               # 工具函数
│   └── global.d.ts        # 全局类型定义
├── .editorconfig          # 编辑器配置
├── .eslintignore          # ESLint 忽略文件列表
├── .eslintrc.js           # ESLint 配置
├── .gitignore             # Git 忽略文件列表
├── .prettierrc            # Prettier 配置
├── LICENSE                # 开源许可证
├── package.json           # 项目依赖和脚本
└── vite.config.ts         # Vite 构建配置

该目录结构清晰地划分了项目的主要组成部分，包括源代码、配置文件以及开发相关的忽略和配置文件。

2. 项目启动文件介绍

package.json 是项目的主配置文件，其中包含了项目依赖和npm脚本。例如，你可以通过以下命令启动本地开发服务器：

$ npm install       # 安装所有依赖
$ npm run start     # 启动开发服务器

这些命令都是在scripts字段下定义的。例如：

{
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}

运行 npm run start 将启动Vite服务器并监听代码变化，进行热更新。而 npm run build 则用于编译项目到生产环境。

3. 项目的配置文件介绍

.env 文件

该项目可能使用了一个名为 .env 的文件来存放环境变量。比如设置公共路径(PUBLIC_URL)以适应子站点部署。在生产环境中，你可能需要创建一个 .env.production 来设置生产环境特定的变量。

vite.config.ts

vite.config.ts 是Vite构建工具的配置文件，它允许自定义构建设置，如输出目录、静态资源处理、代理等。例如，你可以在此配置文件中调整公共路径（base），或者设置CSS预处理器（css.preprocessorOptions）。

import { defineConfig } from 'vite';
export default defineConfig({
  base: process.env.PUBLIC_URL || '/',
  // ...其他配置项...
});

以上是React Antd Admin的基本安装和使用指南，遵循这个框架，你可以快速构建出基于React和Ant Design的管理后台系统。在实际操作过程中，详细阅读项目的官方文档将有助于更好地理解和使用该项目。