一、环境准备
在创建项目前，你的电脑必须安装好基础环境，这是前端开发的必备前提：
- Node.js：Vite 需要 Node.js 18+ 版本，推荐安装 LTS 稳定版
- 包管理工具：Node.js 自带
npm，也可以使用yarn/pnpm（本文以npm为例）
二、使用 Vite 创建 React 项目
Vite 提供了一键式的项目创建命令，无需手动配置复杂的构建文件，全程仅需几步：
1. 执行创建命令
打开命令行，进入你想存放项目的文件夹，输入以下命令：
npm create vite@latest2. 配置项目信息
执行命令后，命令行会依次让你配置项目参数，按步骤选择：
- 项目名称：输入你的项目名（例如：
react-vite-demo），直接回车默认 - 框架选择：上下方向键选择 React，回车确认
- 语言选择：
- 纯 JavaScript：选择 React
- TypeScript：选择 React + TypeScript（新手推荐先选纯 JS）
? Project name: › react-vite-demo
? Select a framework: › React
? Select a variant: › React| 选项 | 适用场景 | 特点 |
|---|---|---|
| TypeScript | 想使用 TypeScript 开发 | 类型安全、代码提示更完善，适合中大型项目 |
| TypeScript + React Compiler | TS + React 编译器 | 自动优化代码，减少手动 memo，实验性较强 |
| JavaScript | 纯 JS 开发、新手入门 | 语法更简单，学习成本低，适合快速上手 |
| JavaScript + React Compiler | JS + React 编译器 | 纯 JS 环境下的自动优化，同样偏实验性 |
| RSC | React Server Components | 服务端组件方案，适合 Next.js 等全栈场景 |
| React Router v7 / TanStack Router 等 | 直接集成路由 | 一步到位配置路由，适合已有路由规划的项目 |
- 新手入门 / 快速学习：选 JavaScript，先专注 React 核心逻辑，避免 TS 语法带来的额外学习成本。
- 追求类型安全 / 企业级项目：选 TypeScript，提前拥抱类型系统，为后续工程化打好基础。
- 实验性尝鲜：可以选带
React Compiler的选项，但不建议作为学习起点。
# 1. 安装依赖
npm install
# 2. 启动开发服务器（开发时用）
npm run dev
# 3. 代码检查（可选）
npm run lint
# 4. 打包项目（上线部署时用）
npm run build3. 项目目录结构详解
react-vite-demo/
├── node_modules/ # 项目依赖包（无需手动修改）
├── public/ # 静态资源（图片、图标等，不会被构建工具编译）
├── src/ # 核心开发目录（所有业务代码都写在这里）
│ ├── assets/ # 项目资源（CSS、图片、字体等）
│ ├── App.css # 根组件样式
│ ├── App.jsx # 根组件（React 页面入口）
│ ├── index.css # 全局样式
│ └── main.jsx # 项目入口文件（渲染根组件）
├── .gitignore # Git 忽略提交的文件
├── index.html # 页面模板（Vite 基于 HTML 入口）
├── package.json # 项目配置（依赖、脚本命令）
└── vite.config.js # Vite 配置文件（可自定义端口、代理等）