feat(docs): integrate ElementPlus and enhance learning map content
- Add ElementPlus UI library to VitePress theme configuration - Improve learning map documentation with collapsible sections and UI components - Add progress indicators and card components to enhance visual presentation
This commit is contained in:
sanbuphy
@@ -1,4 +1,6 @@
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import Viewer from 'viewerjs'
|
||||
import 'viewerjs/dist/viewer.css'
|
||||
import TypeIt from 'typeit'
|
||||
@@ -8,6 +10,9 @@ import './style.css'
|
||||
|
||||
export default {
|
||||
extends: DefaultTheme,
|
||||
enhanceApp({ app }) {
|
||||
app.use(ElementPlus)
|
||||
},
|
||||
setup() {
|
||||
const route = useRoute()
|
||||
const { frontmatter } = useData()
|
||||
|
||||
@@ -2,9 +2,13 @@
|
||||
|
||||
我们正身处由大语言模型（LLM）推动的人工智能应用爆发期。与以往AI开发高度依赖算法研究不同，**当前行业的重心已转向如何有效利用现有强大模型，构建具有实际价值的应用。**这一转变大幅降低了AI开发的门槛，将焦点从"从零开始构建模型"转移到"将AI能力封装为可落地的解决方案"。
|
||||
|
||||
::: tip 💡 核心机遇
|
||||
对大多数人而言，如今最大的机遇并非发明新算法，而是学会如何借助AI编码工具快速实现想法。
|
||||
:::
|
||||
|
||||
::: info 🚀 Vibe Coding 的核心
|
||||
AI coding的出现正在改写传统编程学习的规则。你不再需要花费数年时间精通某门语言的每个细节，而是可以通过与AI协作，**以"vibecoding"的方式将创意直接转化为可运行的代码**。会使用大模型生成代码片段只是起点。
|
||||
:::
|
||||
|
||||
当前真正的挑战在于：如何引导AI生成高质量、可维护的代码？如何将前后端代码组装成完整应用并成功部署上线？在AI时代，如何将文本生成、图像处理、语音识别等AI能力集成到你的应用中？本课程正是为应对这些挑战而设计。
|
||||
|
||||
@@ -16,17 +20,21 @@ AI coding的出现正在改写传统编程学习的规则。你不再需要花
|
||||
|
||||
## 三个阶段的成长路径：从“会用 AI”到“会做 AI 产品”
|
||||
|
||||
**第零阶段：体验 AI 编程的魔力**
|
||||
通过贪吃蛇等小游戏，你将第一次体验到 AI 辅助编程的能力与边界。这个阶段不需要任何编程基础，只需要你愿意动手尝试——看着 AI 在几分钟内帮你生成一个可玩的游戏，你会直观感受到 vibecoding 的强大。
|
||||
::: info 🎮 第零阶段：体验 AI 编程的魔力
|
||||
通过贪吃蛇等小游戏，你将第一次**体验到 AI 辅助编程的能力与边界**。这个阶段**不需要任何编程基础**，只需要你愿意动手尝试——看着 AI 在几分钟内帮你生成一个可玩的游戏，你会直观感受到 **vibecoding 的强大**。
|
||||
:::
|
||||
|
||||
**第一阶段：掌握产品开发的完整闭环**
|
||||
学会使用 AI IDE（如 Cursor、Claude 等工具）将想法转化为可运行的 Web 应用原型。你将学习如何拆解需求、设计多页面应用、接入 AI 能力（文本生成、图像处理等），并用模拟数据完成一个完整的产品 demo。这个阶段结束时，你能独立完成一个像“霍格沃茨画像”那样接入 AI 能力的前端应用。
|
||||
::: tip 🛠️ 第一阶段：掌握产品开发的完整闭环
|
||||
学会使用 **AI IDE（如 Cursor、Claude 等工具）**将想法转化为可运行的 Web 应用原型。你将学习如何**拆解需求、设计多页面应用、接入 AI 能力**（文本生成、图像处理等），并用模拟数据完成一个完整的产品 demo。这个阶段结束时，你能**独立完成一个像“霍格沃茨画像”那样接入 AI 能力的前端应用**。
|
||||
:::
|
||||
|
||||
**第二阶段：成为能上线产品的工程师**
|
||||
这是质的飞跃。你将学习现代 Web 开发的核心技能：从 Figma 设计稿到组件化前端实现，从 Supabase 数据库到 API 接口开发，从 Git 版本管理到 Zeabur 部署上线。更重要的是，你将学会集成支付系统（如 Stripe），让你的应用具备真实的商业价值。通过 Dify 等工具，你还将掌握知识库与工作流的构建，为应用注入更强的 AI 能力。
|
||||
::: warning 💻 第二阶段：成为能上线产品的工程师
|
||||
这是质的飞跃。你将学习**现代 Web 开发的核心技能**：从 **Figma 设计稿**到组件化前端实现，从 **Supabase 数据库**到 API 接口开发，从 Git 版本管理到 **Zeabur 部署上线**。更重要的是，你将学会**集成支付系统（如 Stripe）**，让你的应用具备真实的商业价值。通过 **Dify** 等工具，你还将掌握知识库与工作流的构建，为应用注入更强的 AI 能力。
|
||||
:::
|
||||
|
||||
**第三阶段：构建跨平台的复杂应用**
|
||||
掌握多平台开发能力，将同一个应用部署到 Web、微信小程序、安卓等多个平台。学习 MCP 等高级工具扩展 IDE 能力，深入理解 RAG 原理并使用 LangGraph 等框架设计复杂的 AI 工作流。这个阶段你将具备高级工程师的思维方式和工具链。
|
||||
::: danger 🚀 第三阶段：构建跨平台的复杂应用
|
||||
掌握**多平台开发能力**，将同一个应用部署到 Web、微信小程序、安卓等多个平台。学习 **MCP 等高级工具**扩展 IDE 能力，深入理解 **RAG 原理**并使用 **LangGraph** 等框架设计复杂的 AI 工作流。这个阶段你将具备**高级工程师的思维方式和工具链**。
|
||||
:::
|
||||
|
||||
## 你将获得的核心能力
|
||||
|
||||
@@ -37,63 +45,67 @@ AI coding的出现正在改写传统编程学习的规则。你不再需要花
|
||||
- **AI 能力集成：** 学会调用各类多模态 AI API，将文本、图像、语音等 AI 能力无缝集成到你的应用中，并通过 RAG 等技术构建智能化产品。
|
||||
- **产品思维与运营能力：** 从用户研究到需求拆解，从 MVP 设计到产品迭代，从支付集成到用户管理，形成完整的产品开发与运营闭环。
|
||||
|
||||
# 第一阶段学习目标
|
||||
# 各阶段学习目标
|
||||
|
||||
## 第一阶段学习目标
|
||||
|
||||
本阶段本质上是一套“AI 产品经理 Vibe Coding 能力培训课程”，主要面向希望进入 AI 产品方向、但编程基础较弱或几乎为零的同学，目标是在 AI 的帮助下完成一个“能跑、能展示”的 Web 应用原型。
|
||||
|
||||
```
|
||||
## 模块一：AI 时代，会说话就会编程
|
||||
- 1.1 普通人的困境与机会？
|
||||
- 1.2 AI 能帮你做到什么程度？
|
||||
- 1.3 动手：你的第一个 AI 原生应用
|
||||
::: details 第一阶段完整课程大纲 (点击收起)
|
||||
**模块一：AI 时代，会说话就会编程**
|
||||
- **1.1** 普通人的困境与机会？
|
||||
- **1.2** AI 能帮你做到什么程度？
|
||||
- **1.3** 动手：你的第一个 AI 原生应用
|
||||
|
||||
## 模块二：认识 AI IDE 工具
|
||||
- 2.1 写代码需要什么环境和工具
|
||||
- 2.2 什么是 IDE，为什么需要 IDE
|
||||
- 2.3 AI IDE 和普通 IDE 有什么不同
|
||||
- 2.4 界面上每个按钮是干什么的
|
||||
- 2.5 怎么跟 AI 说话才有效
|
||||
**模块二：认识 AI IDE 工具**
|
||||
- **2.1** 写代码需要什么环境和工具
|
||||
- **2.2** 什么是 IDE，为什么需要 IDE
|
||||
- **2.3** AI IDE 和普通 IDE 有什么不同
|
||||
- **2.4** 界面上每个按钮是干什么的
|
||||
- **2.5** 怎么跟 AI 说话才有效
|
||||
|
||||
## 模块三：动手做出原型
|
||||
- 3.1 把需求变成代码的过程
|
||||
- 3.2 从一个单页面开始
|
||||
- 3.3 遇到报错了怎么办
|
||||
- 3.4 做多个页面的应用
|
||||
- 3.5 把原型做得像那么回事
|
||||
**模块三：动手做出原型**
|
||||
- **3.1** 把需求变成代码的过程
|
||||
- **3.2** 从一个单页面开始
|
||||
- **3.3** 遇到报错了怎么办
|
||||
- **3.4** 做多个页面的应用
|
||||
- **3.5** 把原型做得像那么回事
|
||||
|
||||
## 模块四：给原型加上 AI 能力
|
||||
- 4.1 什么是 AI 能力接入（API 调用）
|
||||
- 4.2 如何接入文生图能力
|
||||
- 4.3 如何接入视频生成能力
|
||||
- 4.4 其他常见 AI 能力的接入方法
|
||||
- 4.5 成本控制和错误处理
|
||||
**模块四：给原型加上 AI 能力**
|
||||
- **4.1** 什么是 AI 能力接入（API 调用）
|
||||
- **4.2** 如何接入文生图能力
|
||||
- **4.3** 如何接入视频生成能力
|
||||
- **4.4** 其他常见 AI 能力的接入方法
|
||||
- **4.5** 成本控制和错误处理
|
||||
|
||||
## 模块五：完整项目实战
|
||||
- 5.1 制造模拟数据让原型看起来真实
|
||||
- 5.2 收集反馈并快速调整
|
||||
- 5.3 展示你的成果
|
||||
**模块五：完整项目实战**
|
||||
- **5.1** 制造模拟数据让原型看起来真实
|
||||
- **5.2** 收集反馈并快速调整
|
||||
- **5.3** 展示你的成果
|
||||
|
||||
## 大作业
|
||||
**大作业**
|
||||
- 做一个完整的 Web 应用原型并展示
|
||||
|
||||
## 附录A：产品思维补充
|
||||
- A.1 什么是好的产品想法
|
||||
- A.2 如何发现用户真正的需求
|
||||
- A.3 功能优先级怎么排
|
||||
- A.4 MVP 思维：最小可行产品
|
||||
**附录A：产品思维补充**
|
||||
- **A.1** 什么是好的产品想法
|
||||
- **A.2** 如何发现用户真正的需求
|
||||
- **A.3** 功能优先级怎么排
|
||||
- **A.4** MVP 思维：最小可行产品
|
||||
|
||||
## 附录B：常见报错及解决方案
|
||||
- B.1 页面显示空白或不加载
|
||||
- B.2 数据保存不成功
|
||||
- B.3 样式显示不正常
|
||||
- B.4 点击按钮没反应
|
||||
- B.5 API 调用失败
|
||||
- B.6 如何把报错信息有效地反馈给 AI
|
||||
```
|
||||
**附录B：常见报错及解决方案**
|
||||
- **B.1** 页面显示空白或不加载
|
||||
- **B.2** 数据保存不成功
|
||||
- **B.3** 样式显示不正常
|
||||
- **B.4** 点击按钮没反应
|
||||
- **B.5** API 调用失败
|
||||
- **B.6** 如何把报错信息有效地反馈给 AI
|
||||
:::
|
||||
|
||||
# 为什么要用项目制来训练？
|
||||
|
||||
::: warning ⚠️ 现实世界的挑战
|
||||
原因其实很简单：按照大多数同学现在的状态，直接走入职场，很可能会在真实项目和老板 / 客户的“社会毒打”下寸步难行。现实世界更常见的场景是：
|
||||
:::
|
||||
|
||||
> 你的导师 / 老板：我们要做一个 xxx，目标是达到 yyy 的效果。
|
||||
>
|
||||
|
||||
@@ -1,30 +1,94 @@
|
||||
# 初级一：AI 时代，会说话就会编程
|
||||
|
||||
|
||||
这是一个**基于项目制学习**的学习教程。我们鼓励你跟随步骤一步步操作，并尝试复现结果。
|
||||
不要担心犯错或修改内容，我们永远相信你可以做到，请你永远记住：
|
||||
|
||||
🎉 **完成比完美更重要**。
|
||||
::: tip 🎉 核心理念
|
||||
**完成比完美更重要**。
|
||||
:::
|
||||
|
||||
|
||||
## 本章导读
|
||||
|
||||
::: info 🎯 学习目标
|
||||
在这一节，你会用对话式 AI 做出第一个 AI 原生小游戏——一款会“吃单词、写诗、画画”的贪吃蛇，并借此搞清楚 AI 编程的初步效果。
|
||||
:::
|
||||
|
||||
- 预计时间：约 **4 小时**，可分多次完成
|
||||
- 预期产出：1 个可运行的 AI 原生贪吃蛇 + （可选）1 个你自创的 AI 原生小游戏或 Demo
|
||||
- Assignment：复现贪吃蛇，并（可选）实现一种你感兴趣的 AI 原生游戏
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<el-steps :active="0" align-center>
|
||||
<el-step title="困境与机会" description="普通人的编程新可能" />
|
||||
<el-step title="能力初探" description="60秒极速开发体验" />
|
||||
<el-step title="原生实战" description="打造AI原生贪吃蛇" />
|
||||
<el-step title="拓展创造" description="举一反三做游戏" />
|
||||
</el-steps>
|
||||
</div>
|
||||
|
||||
## 1. 普通人的困境与机会
|
||||
|
||||
很多人脑子里有一堆产品点子：一款帮自己记账的小工具、一个记录孩子成长的网页、甚至一款小游戏。但一想到要写代码、要找程序员,就直接劝退。
|
||||
|
||||
AI 出现之后,第一次给了普通人一个全新的可能：你不需要会写代码,只需要学会对 AI 说清楚你想要什么。来自 GitHub Copilot 的[数据显示](https://www.wearetenet.com/blog/github-copilot-usage-data-statistics),超过1500万开发者正在用AI辅助编程,平均46%的代码都是AI生成的! 在Java项目中这个比例能达到61%。
|
||||
|
||||
让人真正兴奋的是效率的飞跃：开发者完成任务的速度提升了 55%。原本需要 9.6 天才能提交的代码，现在只要 2.4 天就能搞定。 这种肉眼可见的效率提升，说明 AI 不再只是一个“可选工具”，而是正在成为开发流程中不可或缺的编程助手。采用率的数据也印证了这一点：在获得访问权限的当天，就有 81% 的开发者第一时间完成安装并开始使用；其中 96% 的人更是在当天就开始采纳 AI 提供的代码建议。换句话说，开发者几乎是立刻把 AI 融入了日常编码工作。
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 20px;">🚀</span>
|
||||
<span style="font-weight: bold; font-size: 16px;">效率的飞跃：AI 编程新时代</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-row :gutter="20" style="margin-bottom: 24px;">
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #409EFF; font-size: 24px; font-weight: bold;">55%</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">开发速度提升</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #67C23A; font-size: 24px; font-weight: bold;">2.4 <span style="font-size: 14px;">天</span></div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">提交周期 (原9.6天)</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #E6A23C; font-size: 24px; font-weight: bold;">81%</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">当天安装率</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #F56C6C; font-size: 24px; font-weight: bold;">96%</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">代码采纳率</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div style="line-height: 1.8; color: #606266;">
|
||||
让人真正兴奋的是效率的飞跃：开发者完成任务的速度提升了 <b>55%</b>。原本需要 9.6 天才能提交的代码，现在只要 <b>2.4 天</b>就能搞定。 这种肉眼可见的效率提升，说明 AI 不再只是一个“可选工具”，而是正在成为开发流程中不可或缺的编程助手。
|
||||
<br/><br/>
|
||||
采用率的数据也印证了这一点：在获得访问权限的当天，就有 <b>81%</b> 的开发者第一时间完成安装并开始使用；其中 <b>96%</b> 的人更是在当天就开始采纳 AI 提供的代码建议。换句话说，开发者几乎是立刻把 AI 融入了日常编码工作。
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
对于普通人来说,这个趋势更有意义:如果专业程序员都在大量依赖AI写代码,那我们这些**不会编程的人,为什么不能直接跟AI对话来实现自己的想法呢**?
|
||||
|
||||
这门课的目标是帮你练成新技能：通过自然语言对话就能做应用。我们将教你怎么跟 AI 用计算机的语言沟通、怎么让AI帮你把脑子里的想法变成真实可用的产品。
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<el-steps :active="1" align-center>
|
||||
<el-step title="困境与机会" description="普通人的编程新可能" />
|
||||
<el-step title="能力初探" description="60秒极速开发体验" />
|
||||
<el-step title="原生实战" description="打造AI原生贪吃蛇" />
|
||||
<el-step title="拓展创造" description="举一反三做游戏" />
|
||||
</el-steps>
|
||||
</div>
|
||||
|
||||
## 2. AI 能帮你做到什么程度
|
||||
|
||||
在本节中，我们只讨论一个问题：如果你完全不会写代码，现在的 AI 能帮你做到什么程度？
|
||||
@@ -80,6 +144,9 @@ AI 出现之后,第一次给了普通人一个全新的可能：你不需要会
|
||||
|
||||
在这个边界内，你可以把对话式 AI 看作一位执行力不错的“辅助开发者”。你只需在每一轮用自然语言细化和修正需求，就能快速得到可用的原型。
|
||||
|
||||
**AI 独立完成小型项目的成功率：**
|
||||
<el-progress :percentage="90" :stroke-width="15" status="success" striped striped-flow />
|
||||
|
||||
#### 大型项目需要“流程视角”
|
||||
|
||||
一旦超出小而清晰的范围，只指望靠几轮对话让 AI 端到端完成复杂系统，很快就会遇到上限。大型项目往往要接后端、连数据库、整合第三方服务，还牵涉权限、安全、并发和大量业务规则，目标是交付一整套与现有业务深度打通的系统，而不是一页网页。
|
||||
@@ -94,13 +161,24 @@ AI 出现之后,第一次给了普通人一个全新的可能：你不需要会
|
||||
|
||||
一个可参考的经验是：
|
||||
|
||||
::: warning ⚠️ 适用场景指南
|
||||
- **原型 / Demo / 内部自用工具**：非常适合先交给 AI 打第一版，再由你迭代细节。
|
||||
- **面向真实用户的大型产品**：通常需要工程师在架构、抽象、性能和维护上长期投入。
|
||||
- **强安全 / 强合规系统（如支付、风控、医疗等）**：在当前阶段，不宜“生成完就直接上线”，必须引入严格的审查与测试流程。
|
||||
:::
|
||||
|
||||
在当下，你可以相对安心地把 AI 视作一个高效的 Demo 与自用工具搭档：
|
||||
只要你愿意多测试、多迭代，多问几轮“这里不对，帮我修一下并解释原因”，在原型与内部工具这一级别，整体质量通常是足够且具备实践价值的。
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<el-steps :active="2" align-center>
|
||||
<el-step title="困境与机会" description="普通人的编程新可能" />
|
||||
<el-step title="能力初探" description="60秒极速开发体验" />
|
||||
<el-step title="原生实战" description="打造AI原生贪吃蛇" />
|
||||
<el-step title="拓展创造" description="举一反三做游戏" />
|
||||
</el-steps>
|
||||
</div>
|
||||
|
||||
## 3. 动手：你的第一个 AI 原生应用
|
||||
|
||||
让我们回到动手部分，在前一部分，我们已经用 AI 快速做出了一个可以玩的贪吃蛇原型，也大致知道了 AI 能做什么、不能做什么。接下来我们将学习如何用最基础的 **vibe coding** 技巧创建一个**现代版**的 AI 贪吃蛇游戏。我们将让蛇吃掉文字字符而不是豆子。最后让游戏根据吃掉的文字字符生成一首诗，并画一幅画。
|
||||
@@ -190,6 +268,15 @@ z.ai 的回复将会是这样的：
|
||||
|
||||
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<el-steps :active="3" align-center>
|
||||
<el-step title="困境与机会" description="普通人的编程新可能" />
|
||||
<el-step title="能力初探" description="60秒极速开发体验" />
|
||||
<el-step title="原生实战" description="打造AI原生贪吃蛇" />
|
||||
<el-step title="拓展创造" description="举一反三做游戏" />
|
||||
</el-steps>
|
||||
</div>
|
||||
|
||||
### 3.3 尝试制作其他小游戏
|
||||
|
||||
除了贪吃蛇（游戏），我们可以让想象力尽情驰骋。
|
||||
|
||||
Reference in New Issue
Block a user