Vite Setup Vite 创建项目
最后更新：2026-10-28
Vite Setup Vite 创建项目
Vite 是目前创建 React 项目的主流脚手架：一条命令生成带热更新的开发环境，启动与构建速度远快于旧方案 CRA。无论是学习还是新项目上线，都推荐从它开始。
| 分组 | 核心概念 |
|---|---|
| 类型 | 工具链 |
| 引入版本 | React 18 / Vite 5 时代主流 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev # 启动开发服务器，默认 http://localhost:5173⚙️ 参数
| --template react | 指定 React（JavaScript）模板；写 TypeScript 项目改用 react-ts。 |
|---|
返回值：无返回值，作为工程化脚手架使用：生成的是本地项目目录与 npm 脚本。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
等宽字体的卡片列出四行「文件名 —— 说明」，点击任意一行高亮，底部显示「当前选中：xxx」，模拟浏览 Vite 项目的目录结构与各文件职责。💡 要点
ℹ️ 说明 create-react-app 已停止维护，新项目不要再选它；Vite 是当前社区默认答案。
💡 提示 npm run dev 默认端口 5173；修改 vite.config.js 里的 server.port 可更换。
⚠️ 注意 Vite 要求 Node.js 18 及以上版本，装完记得 node -v 确认。
🏷️ 核心概念相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q create-react-app 还能用吗？
A 能跑但已不推荐：官方不再积极维护，启动慢、依赖旧。新项目请用 Vite（或 Next.js 等框架）。
Q Vite 怎么创建 React 项目？
A 执行 npm create vite@latest 项目名 -- --template react，进入目录 npm install 后 npm run dev 即可。
Q npm run dev 后页面打不开怎么办？
A 先看终端报错：端口被占用就换端口；依赖没装就先 npm install；Node 版本低于 18 需要升级。
