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

这门课的主题其实很明确：用 ChatGPT 和 GitHub Copilot 作为日常编码的协作工具，把前端项目从零到一搭起来。它不是泛泛地讲「AI 能帮你写代码」这种概念，而是把两个工具真正放进一个完整的 Vue3 项目流程里，让你看到每一步该问什么、生成出来的代码长什么样、哪里需要人工调整。整个课程围绕一个博客系统加一个后台管理场景推进，从导航菜单、搜索组件、登录注册，一直做到博客列表、分页、详情、评论、点赞收藏、后台表格和增删改查。所以它解决的问题不是「要不要用 AI」，而是「用 AI 写一个真实项目时，指令怎么给、代码怎么接、坑在哪里」。

这门课真正解决的是什么问题

很多开发者用 ChatGPT 写代码，卡点往往不在工具本身，而在于不知道如何把需求拆成可执行的指令。比如要写一个导航栏，直接说「帮我写个导航栏」得到的代码通常不能用，因为它不知道你用 Vue3 还是 Vue2、用不用 TypeScript、路由怎么配、样式方案是什么。这门课的价值就在于把这一类模糊需求拆成具体步骤：先生成模板主体，再生成导航菜单，接着让菜单能根据 url 参数实时响应，然后抽离出登录和用户信息组件，最后在导航栏显示用户信息并实现注销。每一步都是一次可验证的生成加人工调整，这种颗粒度才是实际开发里能复用的东西。

另一个被解决的问题是工具分工。ChatGPT 擅长根据自然语言描述生成结构化的组件代码、函数逻辑和 API 接口，GitHub Copilot 则更适合在已有文件里补全 Pinia 状态管理代码、快速写出登录逻辑和接口调用、生成评论列表和博客表格这类重复度较高的代码。课程里两条线交替出现，第 4 章以 ChatGPT 为主，第 5 章以 Copilot 为主，让你直观感受到什么时候该用对话式生成，什么时候该让编辑器内的补全接管。这种分工意识比单纯记住几个 prompt 模板更重要。

适合什么基础的人来跟

需要你已经具备基本的前端开发能力，最起码要熟悉 HTML、CSS 和 JavaScript，能看懂组件、props、事件绑定这些概念。如果你完全没写过前端，直接跟这个课会比较吃力，因为课程的重点是「如何用 AI 加速」，而不是「从零教你前端」。它默认你能判断生成出来的代码有没有问题，能读懂路由配置、状态管理和接口请求的基本写法。

如果你已经会 Vue3，但用得不算熟练，或者一直想找一个完整的项目把组件拆分、状态管理、路由跳转、接口封装这些环节串起来，这门课会比较合适。它用到的技术栈集中在 Vue3 加 Pinia，再配合组件化开发和接口调用。你不必事先精通 Pinia，课程里会用 Copilot 生成状态管理代码并演示存储和管理的过程，但你需要知道状态管理是为了解决跨组件共享数据的问题。另外，如果你平时只用 ChatGPT 网页版，没怎么接触过编辑器内的 AI 补全，这门课也能帮你建立对 Copilot 工作方式的认识。

建议先看的几块内容

第 2 章适合先看，它处理的是工具入门到实战的过渡，包括用 ChatGPT 设计 TodoList 项目的组件、写一个前端简历这类练习。这一章的作用是让你先熟悉「提需求、拿代码、改代码」的节奏，成本低、反馈快，不会一上来就被完整项目的复杂度压住。看的时候不要只看结果，重点观察指令是怎么描述的、生成后做了哪些调整，把这两步记下来，后面做项目时可以直接迁移。

接着进入第 4 章的项目开发部分。这一章从导航栏开始，依次生成模板主体、搜索组件、注册表单、登录页，中间穿插 usePageTitle 这类自定义函数，以及用 Copilot 生成 Pinia 代码和 API 接口。建议按顺序跟，因为组件之间存在依赖关系，导航栏和用户信息组件是后面登录状态判断的基础。第 5 章转向博客功能，包括博客列表 API、卡片组件、分页、详情展示、markdown 转换、评论列表、点赞收藏、删除功能，以及后台的博客表格和创建编辑。如果你时间有限，可以优先看第 4 章的登录注册和第 5 章的博客列表到详情这条主线，它们覆盖了最常见的增删改查和列表分页场景。

学完之后能独立做什么

最直接的产出是你能够独立用 Vue3 加 Pinia 搭出一个带登录注册、列表分页、详情展示、评论互动和后台管理的前端项目，并且在开发过程中主动使用 ChatGPT 和 Copilot 来生成组件、函数、接口代码和样式调整。你知道遇到一个功能时先让 AI 生成骨架，再自己补业务逻辑和边界处理，而不是从空白文件开始一行行敲。这种能力放到实际工作里，就是接到需求后能更快拿出可运行的第一版，把时间花在调整和验证上。

更进一步，你能建立一套自己的 AI 协作习惯：知道哪些代码适合让 AI 生成，哪些必须自己写；知道生成结果里常见的样式冲突、状态不同步、接口参数不匹配该怎么排查；也知道如何把一个大需求拆成多个小指令逐步推进。课程里反复出现的「生成后调整优化」正是这种习惯的训练。学完之后你不一定能立刻写出完美代码，但你会有一套可执行的流程，遇到新功能时知道从哪里下手。

资料怎么配合练习

这套资料以视频演示为主，配合项目源码理解会更有效。建议不要只看视频，每看完一个功能的演示就暂停，自己打开编辑器复现一遍。复现时先自己写指令，再对比课程里是怎么问的，看看差异在哪里。比如同样是生成搜索组件，你的指令有没有说清楚数据来源、触发时机和样式约束，这些细节直接决定生成结果能不能用。复现之后把代码跑起来，确认功能正常，再进入下一节。

源码的作用是校对和查漏，不是照抄。遇到自己生成不出来的部分，可以对照源码看结构是怎么组织的，但不要直接把整段复制过去，否则练不到拆解需求的能力。可以给自己定一个小目标：跟完第 4 章和第 5 章之后，脱离视频，用同样的工具链做一个类似规模的小项目，比如一个简单的任务管理或笔记应用，把导航、登录、列表、详情、增删改查都走一遍。这个过程里你会真正遇到状态管理、路由守卫、接口封装的问题，也会更清楚哪些环节 AI 帮得上忙、哪些还得靠自己判断。把每次卡住的地方记下来，回头再看对应章节，收获会比单纯刷完视频大得多。