命令	作用（大白话）
`cd 文件夹名`	走进某个文件夹（change directory）
`cd ..`	往上退一层（回到上级文件夹）
`ls`（Win 用 `dir`）	看看当前文件夹里都有啥
`pwd`	我现在到底站在哪个文件夹？
`mkdir 名字`	新建一个文件夹
`cls` / `clear`	把黑框框擦干净
`↑ 上箭头`	调出上一条命令，不用重打
`Tab 键`	打一半自动补全文件名，超好用

提示

本阶段只要求会：进出文件夹、看清报错。以后启动项目的命令（下一篇《Vue 3 入门》会遇到 npm run dev）也是在这个黑框框里敲的——现在混个眼熟即可，还用不到。

重点：看懂报错，别一红就怕

命令跑失败时，屏幕会刷出一堆红色文字。新手第一反应是慌，其实报错是在帮你——它明明白白告诉你哪出错了。

别看那一大坨，只看关键词。报错里常有一句人话，比如 command not found（这命令没装或打错了）、No such file or directory（路径写错，没这个文件）。
找第一行 + 最后几行。真正的原因常在这两处，中间一大片先略过。
直接复制整段报错去问 AI。「这个报错什么意思，怎么解决？」——90% 的问题 AI 秒答。具体见 AI 速通。

✅ 正确姿势：复制报错 → 问 AI / 搜索 → 照着改 → 再跑一次

❌ 错误姿势：看到红字就关掉，觉得「我不行」。其实老手每天都在看报错。

Git 版本管理

给代码「存档 / 读档」的神器，也是团队多人协作不打架的关键。

它是什么？为什么必须学？

💡 比喻： Git = 游戏存档系统。你改代码就像打游戏，随时能存档（commit）。改崩了？读档回到上一个存档点，安然无恙。多人一起改同一个项目也不会互相覆盖。

再补一个词：GitHub / Gitee / GitLab = 代码的「云盘 + 老家」。你电脑上是本地存档，云端是大家共享的总仓库。

一天里你会用到的 5 个动作

命令	大白话	什么时候用
`git clone 地址`	把云端项目整个下载到本机	第一次拿到项目
`git pull`	把别人的新改动拉下来同步	每天开工第一件事
`git add .`	把你改的文件选进存档	准备存档前
`git commit -m "说明"`	存一个档，写一句干了啥	改完一个小功能
`git push`	把存档上传到云端给大家	确认没问题后

标准工作流（背下这个顺序就行）

提示

第一次给自己的新文件夹建仓库时，先在文件夹里敲一次 git init（相当于「开个新存档位」），之后就是 add → commit 的循环了。本页最后的实践会带你走一遍。

提示

分支（branch）先简单理解为「平行世界的存档」：在自己的分支上折腾，不影响主线，稳了再合并。刚开始能看懂就行。

JavaScript 基础

所有前端都靠它。这是你要真正「读懂」的第一门语言。本阶段的 JS 代码，写在网页的 <script> 里，或按 F12 打开浏览器控制台直接敲，就能看到 console.log 的输出。

变量：给数据起个名字的盒子

变量就是一个贴了标签的盒子，往里放东西，之后用名字就能取。

let name = "张三";   // 一个能改内容的盒子，叫 name
const age = 25;      // const = 常量，放进去就不改了
console.log(name);      // 打印出来看看 → 张三

提示

记住两个词：let（内容会变）、const（不变）。拿不准就先用 const。

函数：一台「输入 → 加工 → 输出」的机器

💡 比喻： 函数就像榨汁机。你放进水果（参数），它加工，吐出果汁（返回值）。同一台机器能反复用。

// 定义一台「加法机」
function add(a, b) {
  return a + b;      // 把结果吐出去
}
add(3, 5);            // 用它，得到 8

// 现在更常见的箭头写法，一个意思
const add = (a, b) => a + b;

数组和对象：装一堆数据的两种箱子

数组 = 有编号的一排格子（排队，讲顺序）

const fruits = ["苹果", "香蕉", "橘子"];
fruits[0];       // 取第 1 个（从 0 开始数！）→ 苹果
fruits.length;   // 有几个 → 3

对象 = 一张登记表（用名字取，不讲顺序）

const user = {
  name: "张三",
  age: 25,
  vip: true
};
user.name;       // 用「钥匙」取值 → 张三

提示

后端返回的数据基本都是「对象套数组」的样子，读懂它俩，就能读懂接口返回的数据长啥样。

判断和循环：if / for

// if：如果……就……否则……
if (age >= 18) {
  console.log("成年了");
} else {
  console.log("还是小孩");
}

// for：重复干同一件事（把每个水果打印一遍）
for (const f of fruits) {
  console.log(f);
}

异步 async / await：等结果时别卡死

💡 比喻： 你在奶茶店点单，不会傻站着堵住整条队。你拿个号（await），先去旁边等，做好了叫你。凡是「要等一会儿」的活（等网络、等文件、等定时器），都用它。

// 做一个「等 1 秒」的小任务
function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function run() {
  console.log("开始");
  await wait(1000);   // 在这儿等 1 秒，不卡住页面
  console.log("1 秒后才打印这句");
}
run();

提示

这是新手最绕的点，看不懂很正常。先记住「凡是要等的操作，前面加 await，函数上写 async」。下一篇《Vue 3 入门》你会用它去「等后端返回数据」，到时就懂它的价值了。

HTML + CSS 入门

网页的「骨架」和「皮肤」。这块只要看懂、不用背。

一句话分清三者

💡 盖房子比喻：HTML = 毛坯房的结构（哪是墙、哪是门、哪是窗） CSS = 装修（刷什么颜色、家具摆哪、多大字） JavaScript = 电器和机关（按了开关灯会亮、门会自动开）

HTML：用「标签」搭骨架

HTML 全是成对的尖括号标签，把内容包起来。开始 <p>，结束 </p>。

<h1>大标题</h1>              <!-- 一级标题 -->
<p>这是一段文字</p>          <!-- 段落 -->
<button>点我</button>           <!-- 按钮 -->
<div>...</div>                  <!-- 一个万能的「盒子 / 区块」 -->

提示

<div> 是最常见的标签，理解成「一个用来装东西、分区域的框」。整个网页就是一堆盒子套盒子。

CSS：给骨架化妆

CSS 写法是「选中谁 { 改什么: 改成啥 }」。

button {
  color: white;              /* 文字白色 */
  background: #6ea8ff;       /* 背景蓝色 */
  padding: 8px 16px;         /* 内边距，让按钮胖一点 */
}

提示

现阶段不用会写 CSS，看到能猜到「哦这是在给按钮改颜色和大小」就合格了。真要改样式时，改个颜色值刷新看效果，就是最好的练习。

VS Code 编辑器

你写代码、看代码的「工作台」。前端项目都用它（后端 Java 另用 IDEA）。

把它用顺，效率翻倍

打开项目：菜单「文件 → 打开文件夹」，选整个项目文件夹，左边就是文件树。
内置终端：`Ctrl + ``（数字 1 左边那个键）直接在编辑器里开命令行。
全局搜索：Ctrl + Shift + F，在整个项目里搜关键词——找代码神器。
快速跳文件：Ctrl + P，输入文件名秒跳过去。
格式化代码：Shift + Alt + F，把乱糟糟的代码一键排整齐。

必装 3 个插件

插件	干嘛的
中文语言包	把界面变中文，新手友好
Prettier	自动帮你把代码排版排漂亮
Volar	写 Vue 时高亮 + 智能提示

提示

看不懂某段代码？选中它交给 AI 让它「逐行解释」，比翻文档快十倍。具体见 AI 速通。

动手实践 · 做出你的第一个网页

把本页 5 样东西全用一遍。照着做，每一步都能马上看到结果。全程不需要装任何框架。

跟着做

用命令行建文件夹。打开 PowerShell / 终端，敲： cd Desktop（进到桌面）→ mkdir my-first-page（建文件夹）→ cd my-first-page（走进去）
用 VS Code 打开它。就在命令行里敲 code .（意思是「用 VS Code 打开当前文件夹」），或者打开 VS Code 手动选这个文件夹。

新建网页文件。在 VS Code 左侧文件树里新建 index.html，把下面这段抄进去（也可以手打一遍，印象更深）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的第一个网页</title>
  <style>
    h1 { color: #6ea8ff; }          /* CSS：标题变蓝 */
  </style>
</head>
<body>
  <h1>你好，世界</h1>
  <button onclick="sayHi()">点我</button>
  <script>
    function sayHi() {              // JS：点按钮触发
      alert("我真的会写网页了！");
      console.log("控制台也能看到我");
    }
  </script>
</body>
</html>

用浏览器打开看效果。去桌面找到 my-first-page 文件夹，双击 index.html——你写的网页出现了。点按钮，弹窗出来。
改一点看一点。回 VS Code：把「你好，世界」改成你的名字、把 #6ea8ff 改成 red，保存，回浏览器按 F5 刷新——变了。这就是你和代码的「对话循环」。
按 F12 看控制台。浏览器里按 F12 → 切到 Console 面板 → 点一下按钮，能看到 console.log 打印的那句话。以后调试全靠这个面板。
用 Git 存档。回到命令行（VS Code 里按 Ctrl + \`` 就有），依次敲： git init（开存档位）→ git add .（选中文件）→ git commit -m "我的第一个网页"（存档！）再敲 git log`，能看到你刚存的这一档。
制造一次报错（故意的）。在命令行敲一个不存在的命令，比如 abcabc，看它报什么错，读懂那句英文——恭喜，你完成了第一次「看报错」训练。

可选加分项

去注册一个 GitHub / Gitee 账号，建一个空仓库，照它页面上给的提示把这个文件夹 push 上去。做不做都行，下一篇《Vue 3 入门》之前完成即可。

什么才算合格

合格标准

命令行：不看教程，能用 cd / ls / mkdir 在文件夹之间进出、新建文件夹
网页：上面的实践独立做完了，桌面上真的有一个能打开、能点的 index.html
改动：能自己改文字、改颜色、改弹窗内容，刷新后看到变化
Git：能对这个文件夹完成 init → add → commit，并用 git log 看到存档记录
报错：遇到红色报错不慌，能说出「它大概在说什么」，或复制去问 AI 解决
口头测试：能用自己的话向别人解释「前端 / 后端 / API 是什么」（餐厅比喻讲出来就行）

没达标怎么办

哪条卡住就回到对应小节再练一遍，不用重学全部。卡住了把问题和报错原文发给 AI。不要跳关——下一篇《Vue 3 入门》的一切都建立在这些之上。