这篇指南从双击图标开始，教你创建my-first-app文件夹、用npm init -y初始化、通过npm create vite@latest搭建Vite项目、编辑index.html写<h1>标签、运行npm run dev启动服务，最终在浏览器访问http://127.0.0.1:5173看到首页面。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你打开编辑器，光标闪烁，却不知道第一行该写什么；复制粘贴别人代码能跑，自己新建文件就卡在 import 语句上；网上教程动辄“新建项目→安装依赖→启动服务”，可你连终端窗口都没打开过——这篇指南只做一件事：带你从双击图标开始，一行一行敲出第一个能访问的网页项目。
创建项目文件夹并初始化环境
在桌面空白处右键 → 新建 → 文件夹，命名为 【my-first-app】（不能含中文、空格或特殊符号，否则后续命令会报错）。
双击打开该文件夹，按住 Shift 键同时右键空白处 → 选择“在此处打开 PowerShell 窗口”（Windows）或“在终端中打开”（macOS）。
输入命令：npm init -y → 回车。这会自动生成 package.json 文件，它是整个项目的身份证，没有它，后续所有依赖都无法正确安装。
安装并配置 Vite 开发服务器
方法一：使用 npm 安装
在已打开的终端中输入：npm create vite@latest → 回车 → 按方向键选择“Vanilla” → 回车 → 输入项目名（直接回车用当前文件夹名）→ 回车 → 选择“JavaScript” → 回车。
方法二：跳过交互式引导（更快）
执行：npm create vite@latest my-first-app -- --template vanilla → 回车 → 进入项目目录：cd my-first-app → 安装依赖：npm install。
用于在用户想通过浏览器自动化与 Google Gemini 或 ChatGPT 交互时。触发短语包括“ask Gemini”“ask ChatGPT”“ask GPT”“让...”。
【必须等待 npm install 完全结束再进行下一步，进度条消失且光标回到 $ 符号才表示完成】
编写第一个 HTML 页面
用 VS Code 打开 my-first-app 文件夹（把整个文件夹拖进 VS Code 窗口即可）。
找到 index.html 文件，删掉里面除 <body></body> 以外的所有内容，保留这两行标签。
在 <body> 内部输入：<h1>你好，这是我的第一个页面</h1> → 保存文件（Ctrl+S / Cmd+S）。
启动本地开发服务器
第一步：确保你还在 my-first-app 目录下的终端中。
第二步：运行开发命令：npm run dev → 回车。
第三步：看到终端输出类似 “Local: http://127.0.0.1:5173/” 的地址后，在浏览器中打开这个链接。
此时页面显示 “你好，这是我的第一个页面”，说明项目已成功运行。关闭终端窗口即停止服务，无需其他操作。
