教程目录

源文件位于 src/content/tutorials/

• 你好，教程 — 第一篇示例教程，用于验证内容集合与排版。
• 项目：待办清单应用 — 从零做一个完整的待办清单，支持增删改查、标记完成、数据持久化
• 动手：做一个个人主页 — 跟着 AI，20 分钟做出一个带自我介绍、社交链接、项目展示的完整个人主页
• AI 编程概述：一场正在发生的软件开发革命 — 深入理解 AI 编程的本质，对比传统编程方式的根本差异，看清 AI 带来的巨大优势
• 项目：天气查询工具 — 做一个调用天气 API 的查询工具，支持城市搜索、实时天气展示
• 动手：做一个产品落地页 — 用 AI 做一个带 Hero 区、特性展示、CTA 按钮的完整产品落地页
• Vibe Coding 深度解析：AI 时代的编程新范式 — 全面理解 Vibe Coding 的哲学、方法论，以及它如何重塑我们对编程的认知
• 项目：记账小助手 — 做一个个人记账工具，支持收入/支出、分类统计、月度报表
• 动手：响应式卡片布局 — 用 CSS Grid 和 Flexbox 做个自适应卡片网格，手机和电脑上自动适配
• AI 编程工具全景：Cursor、Windsurf、Copilot、Cline 以及大模型 API — 全面对比主流 AI 编程工具和模型，包括 IDE 集成工具和大模型 API 调用，帮你选择最适合的工具组合
• 项目：个人博客系统 — 做一个完整的博客，支持文章发布、分类标签、评论功能
• 动手：深色模式切换 — 给页面加上一键深色/浅色切换，记住用户偏好，下次打开自动恢复
• Cursor 完整配置指南：从安装到接入大模型 — 手把手配置 Cursor，包括模型选择、API Key 接入、必装插件和最佳设置
• 项目：AI 聊天助手 — 接入大模型 API，做一个实时对话的 AI 聊天应用
• 动手：AI 对话窗口 — 仿 ChatGPT 的对话界面，支持发送消息、Markdown 渲染、打字机效果
• 大模型 API 调用入门：让你的应用拥有 AI 能力 — 手把手教你调用 OpenAI、Claude 等大模型 API，让 AI 成为你应用的一部分
• 项目：文件分享站 — 做一个支持拖拽上传、生成分享链接的文件分享工具
• 动手：搜索框自动补全 — 做个带下拉建议的搜索框，输入时实时筛选匹配结果
• AI 的能力边界：什么适合做，什么要三思 — 全面了解 AI 编程的适用范围和局限性，避免踩坑，最大化利用 AI 的能力
• 项目：后台管理系统 — 做一个通用后台管理面板，包含数据表格、图表、用户管理
• 动手：拖拽排序列表 — 实现一个可以拖拽调整顺序的列表，像 Trello 卡片一样
• AI 如何改变工作、生活与整个行业 — 看清 AI 正在带来的深刻变革，理解它对个人、企业和社会的影响，找准自己的定位
• 项目：AI 工具导航站 — 做一个 AI 工具集合站，支持分类浏览、搜索、收藏
• 动手：弹窗与表单验证 — 做一个带表单验证的模态弹窗，包含输入校验、错误提示、提交状态
• 编程全流程认知：从一个想法到上线产品 — 建立对软件开发生命周期的完整认知，理解从需求分析到运维的每个环节
• 项目：多用户协作看板 — 做一个 Trello 风格的看板，支持多用户协作、拖拽任务、实时同步
• 动手：从 API 拿数据显示 — 调用一个公开 API，获取数据并在页面上展示出来
• 全栈开发全景：前端、后端、数据库如何协作 — 用生活化的比喻理解全栈架构，建立前端界面、后端逻辑和数据库之间的完整认知
• 部署：发布到腾讯云 COS — 将静态网站部署到腾讯云对象存储，配置静态托管和 CDN 加速
• 动手：表格筛选与排序 — 做一个可搜索、可排序、可分页的数据表格
• 企业级开发入门：大厂的代码是怎么组织和管理的 — 一窥企业级开发的真实面貌，了解工程化、协作流程和质量保障体系
• 部署：绑定自定义域名与 DNS 配置 — 给你的项目绑上自己的域名，配置 DNS 解析和 SSL 证书
• 动手：图表可视化 — 用 Chart.js 做一个交互式图表，支持柱状图、折线图、饼图
• 创建你的第一个 AI 编程项目 — 从零创建一个项目，理解项目结构，迈出 AI 编程的第一步
• 部署：HTTPS 配置与 CDN 加速优化 — 开启 HTTPS 保护用户数据，用 CDN 让全球访问都快如闪电
• 动手：Markdown 实时编辑器 — 做一个左边写 Markdown、右边实时预览的编辑器
• 终端（命令行）基础：不害怕黑窗口 — 零基础学会终端的基本操作，启动服务、安装依赖就靠它了
• 动手：倒计时工具 — 做一个可自定义的倒计时器，支持设置时间、暂停、重置
• Git 与 GitHub 基础：代码的时光机 — 用 Git 保存代码历史，用 GitHub 备份到云端，学会这 5 个命令就够了
• 动手：颜色提取与调色板 — 做一个从图片提取主色调的工具，生成调色板
• Node.js 与 npm：现代开发的发动机 — 理解 Node.js 是什么、npm 怎么工作，轻松管理项目依赖
• Vite：来，搭一个现代化前端项目 — 用 Vite 搭建项目骨架，理解现代化前端项目的标准结构
• 前端项目结构深入：文件都是干什么的 — 彻底搞懂前端项目里每个文件和文件夹的作用，不再看着目录发懵
• 提示词编写指南：让 AI 准确理解你的需求 — 学会写高质量的提示词，大幅提升 AI 的输出质量和准确度
• HTML 快速入门：看懂网页的骨架 — 30 分钟看懂 HTML 标签，能阅读和修改 AI 生成的页面结构
• CSS 快速入门：让页面好看起来 — 30 分钟看懂 CSS，能读懂和修改 AI 生成的样式代码
• JavaScript 基础：让页面动起来 — 理解变量的概念、函数的作用，能看懂 AI 生成的 JS 代码
• 如何与 AI 高效沟通：从需求到代码的最佳实践 — 掌握与 AI 协作的核心沟通技巧，让 AI 成为你的最佳编程搭档
• 代码阅读入门：怎么看懂 AI 写的代码 — 培养代码阅读能力，看懂关键逻辑，告别'AI 生成了但我不认识'
• 常见错误与排查：看到报错不再慌 — 掌握最常见的报错类型和解决方法，独立解决 80% 的日常问题
• 数据存储入门：localStorage 与 JSON — 理解浏览器本地存储和 JSON 数据格式，让数据不丢失
• 后端入门：服务器和 API 是怎么工作的 — 理解后端的基本概念，学会用 AI 创建简单的 API 接口
• 数据库基础：SQL 和 Supabase 入门 — 理解关系型数据库的核心概念，学会用 Supabase 快速搭建数据库
• Vue 3 快速入门：最友好的前端框架 — 理解 Vue 3 的核心概念，看懂组件、响应式、路由的基本用法
• 实战：从零搭建一个博客系统（上） — 动手实战，用 AI 全程辅助，完成博客项目的前端页面和路由
• 实战：从零搭建一个博客系统（下） — 接上 Supabase 数据库和认证，让你的博客变成一个真正的全栈应用
• 部署上线：把你的项目发布到互联网 — 手把手教你用 Vercel、Netlify、腾讯云 COS 将项目部署上线
• AI 编程工作流：从需求到上线的标准流程 — 总结一套可复用的 AI 编程工作流，让每个新项目都有章可循
• 下一步：从学习者到创造者 — 总结学习收获，规划后续学习路径和实战方向