3. 用 Vite 创建项目

本节目标：用 Vite 脚手架创建一个 React 19 项目，启动开发服务器，看到页面跑起来。

为什么选 Vite

Vite 是 Vue 作者尤雨溪开发的构建工具，现在是 React 官方推荐的脚手架底层。

和前辈 webpack 比，Vite 有两个杀手级优势：

启动快：不用打包，直接启动开发服务器，大项目也就几秒
热更新快：改完代码，浏览器瞬间刷新

底层原理是用了浏览器原生的 ES Module，开发时不打包，按需编译。

创建项目

打开终端，执行：

npm create vite@latest

你会看到交互式提示：

Project name：输入项目名，比如 my-first-react-app
Select a framework：选 React
Select a variant：选 JavaScript（初学不建议先上 TypeScript）

创建完成后，终端会提示你：

cd my-first-react-app
npm install
npm run dev

依次执行这三条命令。

Tip
如果不想交互式操作，可以一条命令搞定：
npm create vite@latest my-first-react-app -- --template react

启动开发服务器

npm run dev

看到类似输出就说明成功了：

  VITE v5.x.x  ready in xxx ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

浏览器打开 http://localhost:5173/，就能看到 React 的欢迎页面。

Note

端口号 5173 是 Vite 默认的。如果被占用了，Vite 会自动换一个。

常用 npm 脚本

打开项目根目录的 package.json，能看到 scripts 部分：

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}

命令	作用
`npm run dev`	启动开发服务器
`npm run build`	打包生产环境代码
`npm run preview`	本地预览打包后的代码

日常开发只用 npm run dev，后面两个部署时才会用。

安装依赖

如果你想安装第三方库，用 npm install：

npm install react-router-dom

这会下载包，并自动更新 package.json 和 package-lock.json。

常见问题

端口被占用

如果 5173 被占了，Vite 会自动换端口。也可以手动指定：

npm run dev -- --port 3000

Node 版本太低

报错信息里如果出现 unsupported engine，说明 Node.js 版本不够。回到第 2 节检查版本，确保 ≥18.18。

防火墙弹窗

Windows 首次运行可能弹出网络权限请求，点”允许”就行。这是开发服务器需要监听本地端口。

项目目录初探

创建完成后，项目大概长这样：

my-first-react-app/
├── node_modules/     # 依赖包（不用碰）
├── public/           # 静态资源
├── src/              # 源码目录（你的战场）
│   ├── App.jsx       # 根组件
│   ├── main.jsx      # 入口文件
│   └── index.css     # 全局样式
├── index.html        # HTML 模板
├── package.json      # 项目配置
└── vite.config.js    # Vite 配置

别被吓到，初学阶段你只需要关注 src/ 目录下的文件。下一节会详细解释每个文件的作用。

本节小结

用 npm create vite@latest 创建项目
选 React + JavaScript 模板
npm install 装依赖
npm run dev 启动开发服务器
浏览器打开 http://localhost:5173/ 看效果

项目跑起来了？好，下一节我们看看项目里每个文件都是干嘛的。