这一阶段不追求写代码，只追求「能跑起来 + 能看懂报错 + 会存读档」。命令行、Git、JavaScript、HTML/CSS、VS Code，全程大白话，看一遍就懂。
你现在的目标不是当高手，而是拿到「进门的 5 把钥匙」。有了它们，你才能把项目在自己电脑上 跑起来、看懂屏幕上的报错、以后改代码时不慌。
命令行（也叫终端 Terminal、CMD、PowerShell），就是一个 黑框框，你敲一行文字命令，电脑就照做。
PowerShell；Mac 上用自带的「终端」。命令行任何时候都有一个「当前所在的文件夹」，叫 当前目录。你敲的命令默认就对这个文件夹生效。
D:\project → 想进 demo 文件夹 → 敲 cd demo → 现在你「站」在 D:\project\demo 里了| 命令 | 作用（大白话） |
|---|---|
cd 文件夹名 | 走进某个文件夹（change directory） |
cd .. | 往上退一层（回到上级文件夹） |
ls（Win 用 dir） | 看看当前文件夹里都有啥 |
pwd | 我现在到底站在哪个文件夹？ |
mkdir 名字 | 新建一个文件夹 |
cls / clear | 把黑框框擦干净 |
↑ 上箭头 | 调出上一条命令，不用重打 |
Tab 键 | 打一半自动补全文件名，超好用 |
npm run dev、yarn dev。你现在不用懂原理，先知道「在项目文件夹里敲这行，项目就启动」就够了。命令跑失败时，屏幕会刷出一堆 红色文字。新手第一反应是慌，其实报错是在 帮你——它明明白白告诉你哪出错了。
command not found（这命令没装）、port 3000 already in use（端口被占了）。再补一个词：GitHub / Gitee / GitLab = 代码的「云盘 + 老家」。你电脑上是本地存档，云端是大家共享的总仓库。
| 命令 | 大白话 | 什么时候用 |
|---|---|---|
git clone 地址 | 把云端项目整个下载到本机 | 第一次拿到项目 |
git pull | 把别人的新改动拉下来同步 | 每天开工第一件事 |
git add . | 把你改的文件选进存档 | 准备存档前 |
git commit -m "说明" | 存一个档，写一句干了啥 | 改完一个小功能 |
git push | 把存档上传到云端给大家 | 确认没问题后 |
git pull 拿最新 → 改代码 → git add . → git commit -m "改了啥" → git push 交上去变量就是一个 贴了标签的盒子，往里放东西，之后用名字就能取。
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; // 有几个 → 3const user = {
name: "张三",
age: 25,
vip: true
};
user.name; // 用「钥匙」取值 → 张三// if：如果……就……否则……
if (age >= 18) {
console.log("成年了");
} else {
console.log("还是小孩");
}
// for：重复干同一件事（把每个水果打印一遍）
for (const f of fruits) {
console.log(f);
}await），先去旁边等，做好了叫你。前端向后端要数据要等网络，就是这种「等一下」的活儿。// async 标记「这函数里有需要等的活」
async function getData() {
// await = 在这儿等接口把数据给我，拿到再往下走
const res = await axios.get("/api/products");
console.log(res.data); // 商品列表到手
}await，函数上写 async」，用多了自然懂。HTML 全是 成对的尖括号标签，把内容包起来。开始 <p>，结束 </p>。
<h1>大标题</h1> <!-- 一级标题 -->
<p>这是一段文字</p> <!-- 段落 -->
<button>点我</button> <!-- 按钮 -->
<div>...</div> <!-- 一个万能的「盒子 / 区块」 --><div> 是最常见的标签，理解成「一个用来装东西、分区域的框」。整个网页就是一堆盒子套盒子。CSS 写法是「选中谁 { 改什么: 改成啥 }」。
button {
color: white; /* 文字白色 */
background: #6ea8ff; /* 背景蓝色 */
padding: 8px 16px; /* 内边距，让按钮胖一点 */
}Ctrl + `（数字 1 左边那个键）直接在编辑器里开命令行。Ctrl + Shift + F，在整个项目里搜关键词——找代码神器。Ctrl + P，输入文件名秒跳过去。Shift + Alt + F，把乱糟糟的代码一键排整齐。| 插件 | 干嘛的 |
|---|---|
| 中文语言包 | 把界面变中文，新手友好 |
| Prettier | 自动帮你把代码排版排漂亮 |
| Volar | 写 Vue 时高亮 + 智能提示 |
随便挑一个前端项目，你能——
cd 进到它的文件夹里npm run dev）把它跑起来，浏览器能打开界面git pull 拉最新代码，看懂 commit / push 的作用