ubuntu，react的学习（1）

导语：Ubuntu 上从零搭一个 React 项目，真实流程长什么样

这篇是本机（Ubuntu 桌面环境）第一次正式跑 React 开发环境的完整记录。起点是一个空目录 /home/kt/react，目标是搭出一个能 npm run dev 直接访问的项目骨架。过程中踩到的点有三个：脚手架命令的参数顺序、npm 提示升级大版本要不要跟、以及国内网络下把源换成华为镜像。全部按实际终端输出整理，命令可直接照抄。

核心观点

React 项目搭建这件事，真正需要理解的就是一条主线：创建脚手架 → 装依赖 → 起服务。至于 npm install -g [email protected] 这种"顺手升级"和换镜像源，都属于加速与排障手段，不是必经步骤。新手最容易卡的其实不是框架本身，而是终端里那条 npm notice New major version of npm available —— 它只是提示，不升级项目照样能跑，盲目跟升级反而可能牵出一串依赖变化。

准备工作：先有个工作目录

在 home 目录下建一个专门放前端项目的文件夹，后面所有操作都在这个目录里进行：

mkdir -p ~/react
cd ~/react

确认当前目录再动手，能省掉后面一堆"命令明明对了怎么报错找不到文件"的麻烦。

第一步：用 Vite 创建 React 骨架

用官方脚手架 create-vite 生成项目，命令由三段组成，顺序别写反：

npm create vite@latest task-manager -- --template react

拆开看：task-manager 是项目目录名，-- 之后的参数才是传给 Vite 自己的，--template react 指定用 React 模板。回车后终端会提示需要安装 [email protected]，输入 y 确认，接着会打出：

• Scaffolding project in /home/kt/react/task-manager... —— 骨架开始生成
• Done. Now run: 后面跟着三行 cd task-manager、npm install、npm run dev，这是脚手架给的标准后续动作

这三条就是整个流程的主线，记住它们比记住任何参数都管用。

第二步：装依赖

进目录后先装依赖：

cd task-manager
npm install

实际输出是 added 150 packages, and audited 151 packages in 30s，同时提示 found 0 vulnerabilities。这几个数字是判断环境是否健康的快捷指标：包数量对不上（比如明显只有几十个）多半是模板或锁文件有问题；存在漏洞则要看 npm audit 的具体条目，别一看到 vulnerabilities 就慌。

第三步：起开发服务器

装完直接跑：

npm run dev

默认会监听本地端口并在终端打印访问地址，浏览器打开就能看到 Vite 的默认 React 页面，说明环境通了。终端里按 Ctrl+C 可随时停掉服务。

顺手做的两件事：升级 npm 与换镜像源

装依赖过程中 npm 会提示 10.9.2 有新版 11.2.0，跟着执行：

npm install -g [email protected]

输出 removed 13 packages, and changed 54 packages in 5s。注意这次操作动的是你全局的 npm 本身，而不是项目依赖，所以耗时会非常短。

网络慢的话把源换成国内镜像：

npm config set registry https://repo.huaweicloud.com/repository/npm/

这条只写入当前用户的 npm 配置，对已有项目无副作用，下次 npm install 就会走镜像。

用 VS Code 打开项目的正确姿势

在 /home/kt/react 目录下用 VS Code 打开时，直接打开文件夹可能没反应，稳妥的做法是右键项目目录 → 在终端中打开 / 用 VS Code 打开，或者在 VS Code 里通过 File → Open Folder 逐级选到 task-manager 这一层。选到项目根目录是关键——选中父目录会导致识别不到 package.json，扩展、终端、Node 版本全部对不上。

关键信息与注意事项

• 命令顺序固定：npm create vite → cd 项目名 → npm install → npm run dev，跳步或反序都会报错
• 参数分隔符：脚手架参数和 npm 参数之间必须有 --，漏了会被当成 npm 自己消费掉
• npm notice 不是错误：版本提示可升可不升，升级是全局行为，可能影响其他项目
• 镜像源只改配置不改代码：换源后若依赖安装异常，用 npm config get registry 确认当前源
• VS Code 一定要开到含 package.json 的那一层目录，否则所有 Node 工具链都认不到
• 跑通之后，下一步就是按教程（例如"第 1 课：React 开发环境搭建与第一个组件"）往里填业务代码了

编辑提示

本文记录的是 Ubuntu 环境下用 Vite 创建 React 项目的完整实测流程，保留原文中的目录名、命令输出与镜像地址。如果你要复现，重点核对"脚手架参数分隔符 --""npm notice 不是报错""VS Code 打开层级"这三处；版本号会随时间变化，按你当前环境提示为准即可。

qidao123.com企服评测-应用市场 编辑提示