🚀 使用 Vite 快速创建 React + TypeScript 项目全记录
从零开始，5分钟构建现代化 React 开发环境
📝 前言
今天我要记录一次使用 Vite 初始化 React 项目的完整过程。相比于传统的 Create React App (CRA)，Vite 以其闪电般的启动速度和热更新能力，已经成为现代前端开发的首选工具。
🛠️ 准备工作
只需要确保你的电脑上安装了 Node.js（建议版本 18+）和 npm 即可。
🚀 开始创建项目
第一步：执行创建命令
在终端中运行以下命令：
bash
npm create vite@latest第二步：交互式配置过程
命令执行后，会出现一个清晰的交互式界面：
│
◇ Project name:
│ react_demo01
│
◇ Select a framework:
│ React
│
◇ Select a variant:
│ TypeScript + SWC
│
◇ Use rolldown-vite (Experimental)?:
│ No
│
◇ Install with npm and start now?
│ Yes让我来解释一下每一步的选择：
- 项目名称 ：输入
react_demo01（可以根据需要修改） - 选择框架 ：选择
React - 选择变体 ：选择
TypeScript + SWC- SWC 是用 Rust 编写的高速打包工具，比 Babel 快很多
- 是否使用 rolldown-vite ：选择
No- rolldown 是实验性的，生产环境建议先不启用
- 是否安装依赖并立即启动 ：选择
Yes
第三步：项目创建过程
Vite 开始自动创建项目：
◇ Scaffolding project in E:\WebstormProjects\react_study\demo01\react_demo01...
│
◇ Installing dependencies with npm...
added 172 packages in 18s
46 packages are looking for funding
run `npm fund` for details安装过程非常快速，仅用了 18 秒就完成了 172 个包的安装。
第四步：启动开发服务器
安装完成后，Vite 会自动启动开发服务器：
◇ Starting dev server...
> react_demo01@0.0.0 dev
> vite
VITE v7.3.1 ready in 1058 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help注意这个启动速度！
Vite 只用了 1058 毫秒（约 1 秒）就启动了开发服务器！
📁 生成的项目结构
让我们看看 Vite 为我们生成了什么：
react_demo01/
├── node_modules/
├── public/
│ └── vite.svg
├── src/
│ ├── assets/
│ │ └── react.svg
│ ├── App.css
│ ├── App.tsx
│ ├── index.css
│ ├── main.tsx
│ └── vite-env.d.ts
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── README.md关键文件说明：
vite.config.ts- Vite 配置文件src/main.tsx- React 应用的入口文件src/App.tsx- 主组件index.html- HTML 模板文件tsconfig.json- TypeScript 配置
🎯 访问项目
在浏览器中打开控制台显示的地址：
http://localhost:5173/你会看到 Vite + React 的欢迎页面，包含一个旋转的 React 图标和计数器示例。
🔧 常用命令
现在你的项目已经可以运行了，以下是一些常用命令：
bash
# 启动开发服务器
npm run dev
# 构建生产版本
npm run build
# 预览构建结果
npm run preview
# 运行类型检查
npm run type-check💡 为什么选择 Vite？
闪电般的启动速度
传统工具（如 Webpack）需要打包整个应用才能启动，而 Vite 利用了现代浏览器的 ES 模块支持，实现了按需编译。
极快的热更新
无论应用大小，热更新都能在毫秒级别完成。
开箱即用的功能
- TypeScript 支持
- JSX 支持
- CSS 预处理器
- 环境变量
- 资源处理
易于配置
配置文件简单明了，易于理解和修改。
🚀 下一步行动
项目已经创建完成，你可以开始：
- 修改
src/App.tsx开始编写你的 React 组件 - 添加路由 ：安装
react-router-dom - 状态管理：根据需要选择 Redux、Zustand 等
- 样式方案：可以继续使用 CSS，或切换到 Tailwind CSS、Styled Components 等
📊 性能对比
| 特性 | Vite | Create React App |
|---|---|---|
| 启动时间 | ~1秒 | ~30秒+ |
| 热更新 | 毫秒级 | 秒级 |
| 构建速度 | 快 | 慢 |
| 配置复杂度 | 简单 | 复杂 |
| 生态支持 | 良好 | 优秀 |
🎉 总结
通过这次实践，我们可以看到使用 Vite 创建 React + TypeScript 项目是多么简单快捷。整个过程不到 2 分钟，就获得了一个现代化的、高性能的开发环境。
Vite 不仅提升了开发体验，更重要的是它改变了我们对前端工具链速度的认知。如果你还没有尝试过 Vite，强烈建议你现在就开始使用它！
告别漫长的等待，拥抱闪电般的开发体验！
希望这篇记录对你有帮助。如果你在创建过程中遇到任何问题，欢迎在评论区留言讨论！