教程访问地址

路线图

• 调整结构，更改 顶部导航栏
• 入门教程补充一些视频，便于跟随操作
• 在线教程增加在线预览能力（WebContainer 沙盒，见 在线练习）
• 升级框架

顶部导航栏

1. 全栈教程（在线教程）
2. 工具使用（本地工具）
3. 博客
4. 在线练习（WebContainer 练习场 + 陪练 agent）

在线教程

即导航栏中的 全栈教程（含入门教程、专业教程）。

未来会增加在线预览能力，读者可以直接在浏览器中运行、查看示例结果。

本地工具

即导航栏中的 工具使用。

这部分内容需要读者 自己在本地安装、配置并实践操作（如 nodejs、vscode、git、nvm、docker、prisma 等），无法仅通过阅读掌握。

入门教程

入门教程主要用于 零 基础入门。

针对稍有一些计算机知识，但是完全无软件工程经验人群。（典型人群：大学新生）

学习入门教程的目的是

1. 找到合适的工具
2. 找到正确的 反馈方式

专业教程

专业教程主要用于已经有相关经验，但细节不足的人群。

如：

• css

  1. 知道一种编写 css 的方式，但是仍然想学习其他编写方式。
  2. 能写有一点 css 但是对复杂样式没有实现思路，或者实现的慢，没有一套指导思路。

• js

  1. 能够掌握一种运行 js 脚本的方式，但是还想知道是否有其他运行脚本的方式。
  2. 能够完成一些程序的编写，但是经常被数据结构弄得很头疼，不知道如何将问题分解为合适的数据结构。

等等

专业教程的目的是提供工具的更多可能性。以及阐述相关的原理。

相比于入门教程，专业教程不再重视结果的反馈，而是原理性的解释。

相关的结果，仅提供一些沙盒程序进行展示。（stackblitz）

在线练习

即导航栏中的 在线练习。

浏览器里的 Node.js 练习场：一个 vite + react 模板工程跑在 WebContainer 中，读者指挥陪练 agent 改代码完成学习任务。agent 的模型接入由读者自填 key（默认 DeepSeek，兼容任意 OpenAI 兼容端点），key 仅保存在读者浏览器 localStorage。

部署要求：WebContainer 依赖 SharedArrayBuffer，页面必须处于跨域隔离状态（crossOriginIsolated），服务端需为站点响应加两个头：

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

本地 yarn dev / yarn preview 已由 vite 配置（apps/tutorial/vite.config.ts）带上同名头；生产环境的反向代理（nginx 等）需做同样配置，否则练习页会提示启动失败。

反馈方式

每种工具都会有反馈方式，工具不同，反馈方式也不同。

比如：

1. 前端 H5 CSS 依靠浏览器展示内容。
2. 后端依靠控制台输出。（日志，字符串）