课程简介
这门课解决什么工程问题 很多开发者知道 ChatGPT 很强,但在实际做前端项目时依然不知道怎么把 AI 接入工程:问得太笼统,得到的代码质量不稳定;或者把 AI 当搜索引擎反复问基础语法,效率反而更低。这份资料专门针对前端开发场景,讲清楚「用 AI 独立完成一个小型项目」的完整工作流。内容聚焦于技术实战而非泛概念科普,目标是帮你建立一套可复用的 Prom…
这门课解决什么工程问题
很多开发者知道 ChatGPT 很强,但在实际做前端项目时依然不知道怎么把 AI 接入工程:问得太笼统,得到的代码质量不稳定;或者把 AI 当搜索引擎反复问基础语法,效率反而更低。这份资料专门针对前端开发场景,讲清楚「用 AI 独立完成一个小型项目」的完整工作流。内容聚焦于技术实战而非泛概念科普,目标是帮你建立一套可复用的 Prompt + 工具链操作习惯,从需求拆解到组件设计,再到接口代码生成,最后落到一个能跑起来的前端工程结构。
适合什么基础、建议先看哪几块
适合有 JavaScript、HTML、CSS 基础,能看懂常用开源组件文档但尚未系统使用 AI 辅助编码的开发者;零基础也可以,但后续实操环节会更容易卡住。建议先看第 1 章 1.1 和 1.2 两节建立对 AI 工具的正确认知,避免后续过度依赖或盲目排斥。接着重点看 2.7 和 2.8,这两节以 TodoList 为例,完整演示如何把模糊需求转化为具体组件结构和页面骨架。再看 3.x 章节,了解如何使用 Copilot 快速生成 API 层代码。2.4、2.5、2.6 的简历实战可作为 Prompt 入门的轻量练习,帮助理解提问技巧的落地用法。
学完能独立做什么、资料怎么配合练习
学完后,你能独立完成:用自然语言描述前端项目需求并输出可执行的技术方案;在 Cursor 或 VSCode 中借助 Copilot 快速生成页面结构、业务组件和服务层接口;运用 Prompt 优化技巧,让 AI 输出的代码更稳定、更易复用。资料由视频讲解和项目示例组成,练习路径建议为:先跟着 2.7→2.8 完成一次 TodoList 的全流程复刻,再选择一个你感兴趣的小项目,独立使用 3.x 的工作流从头到尾完成一遍。期间注意对照视频中的输出,检查你的组件划分是否合理、接口定义是否清晰,从而真正掌握这套方法。
课程目录
第1章 课程简介 & 正确看待 AI
[1.1]–1-1 -导学.mp4 11.58M
[1.2]–1-2 -理性认识AI-它是一个工具,它需要主人.mp4 18.29M
第2章 认识常用 AI 工具,入门到实战
[2.10]–2-11 -Github Copilot实战-通过注释智能生成代.mp4 21.53M
[2.11]–2-12 -介绍Cursor-智能代码编辑器,集成了GPT4.mp4 35.50M
[2.12]–2-13 -Prompt优化-全面精准的提问,可以让AI更好的理.mp4 10.83M
[2.13]–2-14 -AI和搜索引擎的区别-两者是完全不一样的.mp4 10.32M
[2.14]–2-15 -国内AI工具介绍.mp4 7.87M
[2.1]–2-2 -ChatGPT为何能一夜走红?.mp4 11.40M
[2.3]–2-4 -关于ChatGPT Plus和GPT4.0 – 我暂不.mp4 15.97M
[2.4]–2-5 -ChatGPT实战-写一个前端简历,快速且全面.mp4 65.84M
[2.5]–2-6 -ChatGPT实战-润色简历文案,看起来更正式.mp4 15.09M
[2.6]–2-7 -ChatGPT实战-写TodoList项目需求,它想的.mp4 24.74M
[2.7]–2-8 -ChatGPT实战-设计TodoList项目的组件,它.mp4 39.53M
[2.8]–2-9 -介绍微软NewBing – 时效性好,但回答的太简洁.mp4 36.45M
[2.9]–2-10 -介绍Github Copilot – 最流行的AI编.mp4 13.42M
第3章 使用 ChatGPT 写项目需求,设计技术方案
[3.10]–3-11 -使用Copilot快速生成API接口代码-part1.mp4 34.33M
[3.1]–3-2 -本课程对于讲师和学员都具有挑战性.mp4 3.70M
[3.2]–3-3 -使用ChatGPT写项目需求大纲-它考虑的非常全面.mp4 27.74M
[3.3]–3-4 -根据ChatGPT的生成结果,提取核心功能.mp4 32.35M
[3.4]–3-5 -使用ChatGPT根据需求,分析需要多少页面.mp4 29.89M
[3.5]–3-6 -搭建Vue3开发环境.mp4 27.36M
[3.6]–3-7 -使用ChatGPT做技术方案设计-先切换它的角色为前端.mp4 24.98M
[3.7]–3-8 -使用ChatGPT生成路由配置,并用Copilot快速.mp4 47.86M
[3.8]–3-9 -使用ChatGPT根据需求设计API接口.mp4 12.33M
[3.9]–3-10 -使用ChatGPT快速生成axios配置和API代码(1).mp4 64.76M
[3.9]–3-10 -使用ChatGPT快速生成axios配置和API代码.mp4 64.76M
第4章 项目开发 part1(以 ChatGPT 为主)
[4.10]–4-11 -使用Copilot快速写出登录功能和API接口代码.mp4 54.02M
[4.11]–4-12 -介绍Vue3状态管理,Pinia 代码演示.mp4 41.24M
[4.12]–4-13 -使用Copilot快速生成Pinia代码,存储和管理.mp4 8.62M
[4.13]–4-14 -使用Copilot生成代码,获取用户信息.mp4 37.38M
[4.14]–4-15 -在导航栏显示用户信息,并实现注销功能.mp4 62.33M
[4.1]–4-2 -使用ChatGPT尝试生成导航栏代码-效果非常好.mp4 24.24M
[4.2]–4-3 -使用ChatGPT生成模板主体的代码.mp4 32.22M
[4.3]–4-4 -使用ChatGPT生成usePageTitle函数,修.mp4 27.04M
[4.4]–4-5 -使用ChatGPT生成导航菜单,并能根据url参数实时.mp4 34.51M
[4.5]–4-6 -使用ChatGPT生成搜索组件代码,清晰的指令即得准确.mp4 24.89M
[4.6]–4-7 -抽离登录和用户信息组件.mp4 8.13M
[4.8]–4-9 -使用Copilot快速写出注册逻辑和API接口代码.mp4 38.41M
[4.9]–4-10 -使用ChatGPT生成登录页的代码,并调整优化.mp4 40.64M
第5章 项目开发 part2(以 Copilot 为主)
[5.10]–5-10 -使用Copilot快速开发点赞和收藏功能,包括UI和.mp4 57.90M
[5.11]–5-11 -使用ChatGPT快速生成评论数据,并写出API接口.mp4 21.83M
[5.12]–5-12 -使用Copilot自动生成评论列表的代码,包括模板和.mp4 61.00M
[5.13]–5-13 -使用Copilot快速开发删除评论的功能,自动执行A.mp4 49.26M
[5.14]–5-14 -使用Copilot快速开发创建评论功能,CSS样式和.mp4 41.30M
[5.15]–5-15 -开发我的博客页面,修改标题和判断登录状态.mp4 37.25M
[5.16]–5-16 -使用Copilot快速生成博客表格,以及其他附加功能.mp4 89.57M
[5.17]–5-17 -使用Copilot快速开发删除博客功能,并自动重载数.mp4 43.17M
[5.18]–5-18 -创建和编辑博客,通过判断id来修改标题.mp4 16.03M
[5.1]–5-1 -开发首页-使用ChatGPT快速生成博客列表API数据.mp4 31.79M
[5.2]–5-2 -使用Copilot快速获取博客数据,并渲染博客列表.mp4 33.23M
[5.3]–5-3 -使用ChatGPT生成博客卡片组件的代码.mp4 46.71M
[5.4]–5-4 -使用ChatGPT继续提问,优化博客卡片组件的样式.mp4 30.52M
[5.5]–5-5 -使用Copilot一分钟生成一个formatDate时.mp4 20.58M
[5.6]–5-6 -使用ChatGPT快速开发博客列表的分页功能.mp4 48.10M
[5.7]–5-7 -使用Copilot快速生成博客API接口代码.mp4 42.00M
[5.8]–5-8 -使用Copilot获取博客内容,并修改网页标题.mp4 42.31M
[5.9]–5-9 -使用Copilot展示博客内容,并转换markdown.mp4 44.72M
第6章 使用 ChatGPT 做项目优化和测试
[6.1]–6-2 -使用ChatGPT优化SearchInput组件代码,.mp4 32.52M
[6.2]–6-3 -使用ChatGPT优化LoginView代码,简化表单.mp4 102.87M
[6.3]–6-4 -使用ChatGPT优化BlogDetailView代码.mp4 97.46M
[6.4]–6-5 -使用ChatGPT优化MyBlogsView代码,有几.mp4 72.39M
[6.5]–6-6 -使用ChatGPT优化CreateEditBlogVi.mp4 83.38M
[6.6]–6-7 -向ChatGPT咨询性能优化的建议,它能结合上下文给出.mp4 34.14M
[6.7]–6-8 -性能优化-配置路由懒加载,抽离公共代码.mp4 59.18M
[6.8]–6-9 -使用ChatGPT生成详细的测试用例,用于功能测试.mp4 20.46M
第7章 AIGC 做副业,成本低 效率高
[7.1]–7-2 -AIGC介绍,它很适合我们做副业.mp4 16.14M
[7.2]–7-3 -使用ChatGPT,五分钟写出一篇三千字的文章.mp4 58.26M
[7.3]–7-4 -NotionAI介绍,内嵌到富文本编辑器中的AI工具.mp4 26.88M
[7.4]–7-5 -NotionAI实战,快速写出一篇文章.mp4 29.74M
[7.5]–7-6 -使用Midjourney生成图片.mp4 17.67M
[7.6]–7-7 -使用Stable-Diffusion生成图片.mp4 25.56M
[7.7]–7-8 -使用一帧秒创,通过文本生成视频.mp4 29.21M
[7.8]–7-9 -使用腾讯智影,通过文本生成视频.mp4 20.02M
第8章 AI 的风险和问题
[8.1]–8-2 -AI的版权问题.mp4 6.93M
[8.2]–8-3 -AI信息泄漏问题.mp4 8.86M
[8.3]–8-4 -AI诈骗问题.mp4 6.94M
课件
无密 (2.1)–2-1 章开始.pdf 45.06kb
无密 (2.2)–2-16 章总结.pdf 45.32kb
无密 (3.1)–3-1 章介绍.pdf 36.59kb
无密 (4.1)–4-1 章开始.pdf 36.08kb
无密 (5.1)–5-21 项目开发 – 总结.pdf 41.80kb
无密 (6.1)–6-1 章开始.pdf 30.23kb
无密 (6.2)–6-10 优化和测试 – 总结.pdf 36.04kb
无密 (7.1)–7-1 章开始.pdf 37.24kb
无密 (7.2)–7-10 章总结.pdf 39.56kb
无密 (8.1)–8-1 章开始.pdf 26.66kb
无密 (8.2)–8-5 章总结.pdf 27.63kb