快速开始
信息
在开始之前，推荐先学习 React，并正确安装和配置了 Node.js v18 或以上。官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识，并且已经完全掌握了 React 全家桶的正确开发方式。如果你刚开始学习前端或者 React，将 XinAdmin 框架作为你的第一步可能不是最好的主意。
本文会帮助你从头启动项目
环境准备
确保你的环境满足以下要求：
- git: 你需要git来克隆和管理项目版本。
- nodejs v18: >=18.12.0，推荐 18.19.0 或更高。
- pnpm: >= 10.11.0，推荐最新版本。
开发工具
XinAdmin 使用 WebStorm 进行开发，感谢 WebStorm 提供非商业用途支持。
我们还推荐你使用 VSCode 作为新手的开发工具，过早的使用更高级的开发工具也会造成环境依赖。
代码获取
从 GitHub 获取代码
请自行解决并保证 GitHub 网络通畅
# 克隆代码
git clone https://github.com/xin-admin/xin-admin.git
安装依赖
我们推荐使用 pnpm 作为你的依赖安装工具，执行以下命令安装项目：
pnpm i
目录结构
xin-admin
├── dist // 打包后的生产环境输出目录（由vite构建生成）
├── node_modules // 项目依赖的第三方模块目录
├── public // 静态资源目录
│ ├── favicon.ico // 网站图标
│ └── index.html // 基础HTML模板
├── src // 项目源代码目录
│ ├── api // 所有API请求
│ ├── assets // 静态资源（图片、字体等）
│ ├── components // 全局公共组件
│ ├── domain // 核心业务领域模型/实体定义
│ ├── layout // 全局布局组件（如导航栏、侧边栏等）
│ ├── locales // 国际化多语言文件
│ ├── pages // 页面组件
│ ├── router // 路由配置
│ ├── stores // 状态管理（zustand 模块）
│ ├── utils // 工具函数库（通用辅助函数）
│ ├── App.tsx // 应用根组件
│ ├── index.css // 全局样式文件
│ └── vite-env.d.ts // Vite环境变量类型声明
├── .editorconfig // 统一编辑器配置（缩进/编码等）
├── .env.development // 开发环境变量配置
├── .env.production // 生产环境变量配置
├── .gitignore // Git版本控制忽略规则
├── eslint.config.js // ESLint静态检查配置
├── index.html // 主入口HTML文件
├── package.json // 项目配置和依赖声明
├── pnpm-lock.yaml // 精确依赖版本锁定文件（pnpm专用）
├── README.md // 项目说明文档（部署/开发指南）
├── tsconfig.json // TypeScript编译器配置
└── vite.config.ts // Vite构建工具配置（插件/代理等）
启动项目
开发环境启动
pnpm dev
启动成功后，控制台会打印以下信息：
VITE v6.3.5 ready in 616 ms
➜ Local: http://localhost:3000/
➜ Network: http://192.168.1.100:3000/
➜ press h + enter to show help
浏览器打开 http://localhost:3000/ 查看项目。