你打开编辑器，光标闪烁，却不知道第一行该写什么；复制粘贴别人代码能跑，自己新建文件就卡在 import 语句上；网上教程动辄“新建项目→安装依赖→启动服务”，可你连终端窗口都没打开过——这篇指南只做一件事：带你从双击图标开始，一行一行敲出第一个能访问的网页项目。 整个过程并不复杂，从双击图标开始，创建项目文件夹、用命令初始化环境、搭建开发服务器、编写第一个 HTML 页面，再到启动服务看到最终成果，每一步都交代得清清楚楚。具体来说，会依次涉及：创建 `my-first-app` 文件夹、运行 `npm init -y` 初始化、通过 `npm create vite@latest` 搭建 Vite 项目、编辑 `index.html` 写入标题标签、执行 `npm run dev` 启动服务，最后在浏览器访问 `http://127.0.0.1:5173` 看到你的第一张网页。 ## 创建项目文件夹并初始化环境 在桌面空白处右键 → 新建 → 文件夹，命名为 **【my-first-app】**（注意：不能含中文、空格或特殊符号，否则后续命令会报错）。双击打开该文件夹，按住 Shift 键同时右键空白处 → 选择“在此处打开 PowerShell 窗口”（Windows）或“在终端中打开”（macOS）。 输入命令：`npm init -y` → 回车。这一步会自动生成 `package.json` 文件——它是整个项目的身份证，没有它，后续所有依赖都无法正确安装。 ## 安装并配置 Vite 开发服务器 **方法一：使用 npm 安装** 在已打开的终端中输入：`npm create vite@latest` → 回车 → 按方向键选择“Vanilla” → 回车 → 输入项目名（直接回车用当前文件夹名）→ 回车 → 选择“Ja vaScript” → 回车。 **方法二：跳过交互式引导（更快）** 执行：`npm create vite@latest my-first-app -- --template vanilla` → 回车 → 进入项目目录：`cd my-first-app` → 安装依赖：`npm install`。 > **【必须等待 npm install 完全结束再进行下一步，进度条消失且光标回到 $ 符号才表示完成】** ## 编写第一个 HTML 页面 用 VS Code 打开 `my-first-app` 文件夹（把整个文件夹拖进 VS Code 窗口即可）。找到 `index.html` 文件，删掉里面除 `` 以外的所有内容，保留这两行标签。在 `` 内部输入：`

你好，这是我的第一个页面

` → 保存文件（Ctrl+S / Cmd+S）。 ## 启动本地开发服务器 第一步：确保你还在 `my-first-app` 目录下的终端中。 第二步：运行开发命令：`npm run dev` → 回车。 第三步：看到终端输出类似 “Local: http://127.0.0.1:5173/” 的地址后，在浏览器中打开这个链接。 此时页面显示 “你好，这是我的第一个页面”，说明项目已成功运行。关闭终端窗口即停止服务，无需其他操作。