教程目录
源文件位于 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 编程工作流,让每个新项目都有章可循
- 下一步:从学习者到创造者 — 总结学习收获,规划后续学习路径和实战方向