004 使用 Vite 搭建 React 19 开发环境

Node.js 环境安装完成后，就可以开始创建项目目录与初始化项目了。
首先在系统或者 VS Code 终端中通过 CD 命令进入项目文件夹，你可以直接使用 VS Code 打开项目文件夹。执行 Vite 项目创建命令：npm create vite@latest。如果你需要再当前项目创建 React 初始化项目，请直接在项目创建命令后面添加 ./。如果要在专属文件中创建 React 项目文件夹，请在项目命令后面添加项目文件夹名称。

npm create vite@latest ./ // 在当前文件创建项目
npm create vite@latest projectNmame // 在projectNmame文件夹中创建项目

npm create vite@latest ./ // 在当前文件创建项目
npm create vite@latest projectNmame // 在projectNmame文件夹中创建项目

执行 Vite 项目创建命令后，项目初始化流程将自动启动。在终端的交互提示中，选择 React 作为项目核心框架，开发语言可选择 JavaScript 或 TypeScript。本课程全程采用 JavaScript 进行教学，为保证学习过程与课程内容同步，建议你同步选择 JavaScript 作为开发语言，其余选项使用默认选择。如下图所示：

项目初始化过程中会自动安装项目运行所需的基础包，不需要和以前那样还需要通过CD命令进入自动生成的项目子目录使用 npm install 安装项目依赖。

注意

npm 包名（package name）需要遵循一系列规范规则，以保证它在 URL、命令行和文件系统中都能正常使用。总体来说，一个合法的 npm 包名必须是唯一、简洁且符合格式限制的字符串：所有字符必须是小写字母，不能包含空格，也不能包含中文等非 URL 安全字符；可以使用数字、连字符（-）或下划线（_），但不能以 . 或 _ 开头；名称长度不能超过 214 个字符，同时也不能使用 Node.js 内置模块名或保留名称。此外，包名最终会作为 URL 地址、命令参数和文件夹名称的一部分，因此必须避免任何可能导致解析错误的字符。

简单来说，npm 包名的本质是一个全局唯一的标识符，既要满足技术上的格式要求，也要便于他人理解和使用，因此通常推荐使用类似 todo-app、react-task-manager 这种小写、清晰且有描述性的英文名称。

1..2 启动开发服务器

项目环境配置完成后，在VS Code终端中执行以下命令启动命令开启 Vite 开发服务器。

npm run dev

Vite 默认占用 5173 端口运行应用，在浏览器中访问 localhost:5173，若页面正常加载，即代表 React 19 项目模板搭建成功。如下图所示：

若需要自定义服务器端口，可修改 vite.config.js 文件.在配置对象中新增 server 属性，在该属性下指定目标端口（如 3000、3001 等），本课程默认使用 5173 端口，学习者可根据自身习惯灵活调整。如下所示：

1.3 开发服务器启停操作

由于开发服务器是在前台进程中运行，终端会实时输出运行日志与状态信息。

在你一天的开发工作结束后，通常需要终止运行开发服务器。Windows 系统中按Ctrl + C后，需要输入 Y 并按回车键确认；macOS 与 Linux 系统直接按下 Ctrl + C 即可直接终止开发服务期。

至此，基于 Vite 的 React 19 开发环境已完整搭建完成，该标准化项目模板，将成为后续开发动态化、交互式 Web 应用的坚实基础。