程序员的 AI 启蒙课：ChatGPT 让你 1 人顶 3 人【8章】

面向上班族和转行者的课程导读，最怕写成一份好看的时间表：章节排得整齐，学完却发现手里还是空的。这门课不是那种把 AI 概念讲一遍就收尾的科普，它的落点很窄也很实——让一个写前端的人，借助 ChatGPT 和 Copilot，把手上那些反复出现的编码活儿压缩掉一大半。它围绕的核心场景是：你接到了一个前端项目，要做导航、登录注册、列表分页、评论、点赞收藏、后台表格、内容编辑，这些事过去一件件敲，现在换个做法，边和模型对话边把代码落下来。整门课的 8 章里，真正扛重量的部分在第 4 章和第 5 章，前面的章节负责把你带进工具本身。

它解决的是哪一类工作场景

如果你在日常工作里经常遇到「一个人顶一个小组」的局面——需求排得密，页面一个接一个，接口、表单、状态管理、样式调整全得自己来——那这门课对标的正是这种处境。它没有教你怎么训练模型，也没有讲提示词的学院派理论，而是把 ChatGPT 和 Copilot 放进一个具体的前端项目里，看它们在哪一步能顶上、哪一步需要人把控。比如导航菜单要跟着 URL 参数变、搜索组件要接表单状态、登录注册要处理接口和校验，这些不是抽象练习，是一个真实项目里绕不开的环节。课里的做法是把指令写清楚，让模型先出一版，再自己调整优化，这个「生成—审阅—收口」的节奏贯穿全程。

更值得注意的是它区分了两类工具的使用边界。ChatGPT 更适合先想结构、出模板、写逻辑雏形，遇到复杂判断时你可以反复追问；Copilot 更擅长在你已经开好文件、写好上下文之后补全代码，速度快、连贯性好。课程前半段以 ChatGPT 为主，后半段明显偏向 Copilot，这个安排本身就在传递一个判断：先会问，再会补。对害怕「AI 写的代码不敢用」的人来说，这种先把思路拉直、再让工具加速的顺序，比一上来就自动补全要安全得多。它解决的不只是效率问题，也是「不知道该不该信」的心理卡点。

适合什么基础的人来看

这门课对基础是有门槛的。你得能看懂 JavaScript，对前端项目的基本结构有概念，知道组件、路由、状态这些词指的是什么。课里出现的 Vue3 和 Pinia 不是从零讲起的，状态管理那一段更像是在已有认知上做一次对接，而不是把概念掰开揉碎。如果你完全没碰过前端，直接进第 4 章会有些吃力，因为里面大量的动作是「让模型生成一段代码，然后判断它对不对」，判断力来自你已经会写。反过来说，只要你有过一两个前端项目的实战经历，哪怕写得不算漂亮，这门课的节奏是接得住的。

转行的人需要额外留意一点：这门课不负责补前端基础，它假定你已经能写页面、能调接口。它真正给你的，是换一套工作方式。所以如果基础还虚，建议先把 Vue3 的组件通信、路由和 Pinia 的存取逻辑过一遍，再来听课里的实战。另外一个容易被忽略的适配点是你手上的工具环境——Copilot 需要编辑器里的插件配合，ChatGPT 需要能稳定访问，这些课里不会替你解决。工具本身不复杂，但要提前准备，否则实战环节会频繁断在环境上，而不是断在理解上。

建议先看哪几块

按顺序硬啃并不是最优解。第 2 章是认识工具的部分，它用两个小例子——一个待办清单的组件设计，一个前端简历的生成——让你先感受一下模型能做什么、不能做什么。这两个例子的体量很小，作用在于校准预期，看的时候不用逐帧跟做，重点是观察提问的方式和模型的回应结构。真正值得反复回看的是第 4 章开头那几个片段，也就是用 ChatGPT 生成导航栏、模板主体、搜索组件、usePageTitle 这类函数的过程。这几段里藏着这门课最核心的手艺：怎么把一句模糊的需求拆成模型能接住的指令。

第 4 章后半段和第 5 章前半段是密度最高的区域。登录注册、用户信息、注销、Pinia 的存取、博客列表和分页、评论和点赞收藏，这些环节几乎覆盖了一个内容型前端项目的主要工作面。第 5 章后段涉及博客的创建编辑、删除、Markdown 展示和表格类页面，适合你手上正好有类似需求时对照着看。如果时间有限，建议把第 4 章的登录与状态管理、第 5 章的列表与评论这几块吃透，其余部分按需点开。不要试图一次性全部看完，这门课的片段之间有强依赖，跳着看容易在上下文上卡住。

学完能独立做什么、资料怎么配合练

学完之后，你应该能独立完成一个带用户体系的前端应用里的大部分常规页面：从导航和布局搭起，接上登录注册，用状态管理保存用户信息，做出带分页的列表，再补上评论、点赞、收藏这类交互功能，最后处理内容的新增、编辑和删除。更重要的是你手里多了一套工作流——遇到一个页面，先想清楚要模型产出什么，再决定用对话方式还是补全方式，生成后自己过一遍逻辑和边界。这套流程一旦顺手，你做同样一个页面的时间会明显缩短，而这种缩短是可以迁移到别的项目上的。

资料包里的视频按项目推进顺序排列，最好的配合方式是边看边在自己的编辑器里同步做。注意不要只当观众：看到生成代码的片段，暂停下来自己先写一遍指令，比较模型给你的结果和课里的结果差在哪里，这个差异往往就是指令写得够不够清楚的地方。每看完一个功能模块，试着不看视频复盘一遍，把当时的指令默写出来，卡住的地方再回看。第 4 章和第 5 章的工具侧重不同，可以在同一段代码上分别用 ChatGPT 和 Copilot 试一次，感受两者在同一任务上的差别，这种对比比单看讲解更能建立手感。练的项目不必和课里完全一样，换成你自己的需求，只要结构相似，迁移效果会更好。

一点务实的提醒

不要把模型生成当作交付。这门课展示的是加速，不是替代。生成出来的代码往往在命名、边界处理、错误分支上需要人来收口，尤其是接口调用和状态同步这类容易出问题的地方，模型不会主动替你想到异常情况。课里反复出现的「调整优化」「自动重载数据」其实就是这个意思：生成只是起点。带着审视去用，比全盘接受更快形成自己的判断标准，也更能把工具用成长期能力而不是临时拐杖。如果你现在每周要花大量时间在重复的页面和接口代码上，这门课值得你认真看一遍，并且真的动手跟着做。