十年匠心定制 · 商业建站与技术教学双线并行 咨询热线:400-886-1026 service@lmnt.cn
ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

‌Vibe Coding(零 前期准备)

‌Vibe Coding(零 前期准备) AI Coding 零基础实战教程从零开始用自然语言指挥AI构建真实软件项目基于 Claude Code 深度实践 | 多模型配置全覆盖 | 国内用户友好目录前言一个不会写代码的人如何用AI构建软件第零部分环境准备与工具安装第一部分AI编程基础理论第二部分AI编程工具生态与模型选择第三部分Claude Code 深度使用与进阶技巧第四部分AI技能系统Skills深度实践第五部分完整项目案例实操第六部分项目实战独立完成第七部分Codex Desktop 安装和使用教程附录阅读约定在正式开始之前先了解本教程中使用的标记约定提示这是一个帮助你更好理解概念的提示信息。注意这是一个需要特别留意的事项忽略可能导致问题。避坑这是其他学习者踩过的坑提前了解可以少走弯路。验证这是一个检查点执行后应该看到预期结果确认你走在正确的路上。所有终端命令前会标注适用的操作系统Windows / macOS / 通用代码注释全部使用中文方便理解模型、价格、安装命令和第三方工具信息变化很快本文中相关信息已在2026-05-18按官方文档做过一次核对正式使用前仍应以官网当前页面为准$符号表示终端命令提示符输入命令时不需要输入$尖括号xxx表示需要替换为你自己的实际内容前言一个不会写代码的人如何用AI构建软件一个真实的故事想象这样一个场景产品经理小王完全不会写代码但他用自然语言向AI描述了自己想要的功能 —— “帮我做一个团队内部的书签收藏工具支持按标签分类和搜索”。三天后一个功能完整、界面美观的Web应用上线了。这不是科幻这是2026年正在发生的事情。传统的编程学习路径是这样的花几个月学语法 → 花几个月做练习 → 花几个月做项目 → 终于能写出可用的软件。而AI编程的路径完全不同你只需要学会如何清晰地表达你想要什么AI来负责把它变成代码。这就像你不需要学会砌墙、接水管、布电路你只需要能清楚地告诉装修队我想要一个什么样的家专业的团队会帮你实现。AI编程工具就是你的装修队而你要学的是如何当好这个业主。这本教程是写给谁的本教程面向完全没有编程经验的初学者。你不需要具备以下任何知识不需要会任何编程语言Python、JavaScript、Java……统统不需要不需要数学基础不需要计算机科学学位不需要之前用过任何开发工具你只需要具备基本的电脑操作能力会上网、会装软件、会管理文件夹一定的英语阅读能力能借助翻译工具看懂简单的英文界面即可清晰的逻辑思维能描述清楚我想要什么一颗愿意尝试的心你将学到什么完成本教程后你将能够能力具体表现理解AI编程能向他人解释什么是Vibe Coding、Agentic Engineering、SDD掌握核心工具能熟练使用Claude Code完成完整的软件开发灵活选模型能根据任务需求选择最合适的AI模型Claude/DeepSeek/千问等构建Skill能创建自定义的AI技能模块提升开发效率独立做项目能独立使用AI工具从零构建并部署一个完整的Web应用学习路径总览第零部分环境准备 ──→ 打好地基安装必要工具 ↓ 第一部分基础理论 ──→ 建立认知理解AI编程的核心概念 ↓ 第二部分工具生态 ──→ 了解主流工具与模型完成安装与选型 ↓ 第三部分Claude Code 深度使用 ──→ 掌握武器深入学习Claude Code的全部能力 核心 ↓ 第四部分技能系统 ──→ 效率倍增构建可复用的AI技能 ↓ 第五部分项目实操 ──→ 学以致用从零到一完成完整项目 重点 ↓ 第六部分独立实战 ──→ 独当一面自主完成项目开发 ↓ 第七部分Codex Desktop ──→ 拓展视野掌握另一个主流AI编程工具学习建议动手大于阅读—— 每学一个概念立刻打开终端实践项目驱动学习—— 带着我要做出一个产品的目标去学拥抱错误—— AI会犯错你也会犯错这都是学习过程持续迭代—— 没有一步到位的完美先能跑再说记录与分享—— 把踩的坑记下来分享出去加深理解第零部分环境准备与工具安装学习目标搭建完整的开发环境确保后续学习零障碍完成标志能在终端执行基本命令至少一个AI编程工具可正常运行工欲善其事必先利其器。在正式进入AI编程世界之前我们需要先把工作台搭好。这就像做菜之前先把厨房收拾好、食材买齐 —— 虽然不是最激动人心的环节但跳过它后面会处处碰壁。0.1 终端/命令行入门你的AI编程控制台0.1.1 什么是终端你平时用电脑是通过鼠标点击图标、菜单来操作的这叫图形界面GUI。而**终端Terminal**是另一种操作电脑的方式 —— 通过输入文字命令来告诉电脑做什么。打个比方图形界面就像在餐厅看着菜单点菜点什么有什么终端就像直接跟厨师说你想吃什么更灵活但需要知道怎么说。AI编程工具如Claude Code几乎全部运行在终端中所以掌握基本的终端操作是第一步。0.1.2 如何打开终端Windows 用户按下键盘上的Win R键Win 是键盘左下角带 Windows 标志的键在弹出的运行对话框中输入powershell按回车键或者更简单的方式在桌面底部的搜索栏中搜索PowerShell点击Windows PowerShell打开macOS 用户按下Command 空格打开 Spotlight 搜索输入Terminal或终端按回车键打开提示打开终端后你会看到一个黑色或白色的窗口里面有一个闪烁的光标等待你输入命令。不要怕它不会因为你输错命令就爆炸 —— 最多给你一个报错信息而已。0.1.3 5个必会终端命令以下是你需要掌握的最基本的终端命令。打开终端跟着一起敲1.pwd—— 查看当前位置我在哪# 通用命令macOS/Linux直接输入Windows PowerShell也支持$pwd预期输出# Windows 输出类似 C:\Users\你的用户名 # macOS 输出类似 /Users/你的用户名这就像你在商场里看一下脚下的地图上您在此处的标记。2.lsmacOS/Linux或dirWindows—— 查看当前目录有什么# macOS / Linux$ls# Windows PowerShellls也可以用但dir是经典命令$dir预期输出Desktop Documents Downloads Pictures Videos 桌面 文档 下载 图片 视频就像打开一个文件夹看看里面有什么东西。3.cd—— 进入某个目录走到某个位置# 进入桌面文件夹$cdDesktop# 返回上一级目录$cd..# 直接回到用户主目录$cd~cd是 “change directory” 的缩写就是换个地方的意思。4.mkdir—— 创建新文件夹# 创建一个名为 my-project 的文件夹$mkdirmy-project# 验证查看是否创建成功$ls预期输出中应该能看到my-project文件夹。5.clear—— 清屏屏幕太乱了清理一下$clear验证在终端中依次执行以下命令确认你能正常操作$pwd$mkdirai-coding-test $cdai-coding-test $pwd$cd..如果每条命令都能正常执行且没有报错恭喜你终端入门完成0.1.4 常见问题问题原因解决方案命令输入后提示不是内部或外部命令命令拼写错误或该命令不存在检查拼写注意大小写中文路径导致命令失败某些工具不支持中文路径使用全英文路径名如D:\projectsPowerShell 窗口闪退可能被系统策略限制右键以管理员身份运行注意在整个教程中请尽量使用全英文的文件夹名和文件名。中文路径在很多开发工具中会引发奇怪的错误这是一个经典的坑。0.2 开发环境安装0.2.1 Node.js 安装Node.js 是一个让 JavaScript 能在电脑上运行的环境。它是前端开发、npm 包管理、Next.js/Vite 项目的基础工具也是 Claude Code 官方安装前置条件之一。你可以把 Node.js 理解为 AI 编程项目的“基础运行环境”很多脚手架、依赖安装、构建命令都离不开它。下载安装打开浏览器访问 Node.js 官网https://nodejs.org/你会看到两个版本按钮选择左边的LTS长期支持版这是最稳定的版本下载完成后双击安装包安装过程中一路点“Next”下一步保持默认选项即可最后点“Install”完成安装注意安装时请确保勾选了Add to PATH选项默认是勾选的这样才能在终端中直接使用node和npm命令。验证安装安装完成后关闭并重新打开终端这一步很重要否则新安装的命令可能找不到然后输入# 检查 Node.js 版本$node-v预期输出v24.15.0版本号可能不完全一致。建议安装官网当前 LTS 版本如果用 npm 安装 Claude Code需要 Node.jsv18或更高版本。# 检查 npm 版本npm 是 Node.js 自带的包管理器$npm-v预期输出11.12.1验证如果两条命令都能输出版本号恭喜Node.js 安装成功常见问题问题原因解决方案node: command not found或 “不是内部命令”Node.js 未添加到系统 PATH重新安装并确保勾选 “Add to PATH”或手动将 Node.js 安装目录添加到系统环境变量版本低于 v18下载了旧版本重新到官网下载最新的 LTS 版本安装过程报错Windows权限不足右键安装包 → “以管理员身份运行”macOS 提示无法验证开发者macOS 安全限制系统偏好设置 → 安全性与隐私 → 仍要打开提示如果你是 macOS 用户推荐使用nvmNode Version Manager来管理 Node.js 版本方便将来切换不同版本。安装命令$curl-o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh|bash安装完成后重启终端然后使用nvm install --lts安装最新 LTS 版本。0.2.2 Git 安装与配置Git 是一个版本控制工具。什么是版本控制想象你在写一篇文章每写一个版本你都存一份副本论文_v1.doc、论文_v2.doc、论文_最终版.doc、论文_最终最终版.doc…… Git 就是帮你优雅地管理这些版本的工具。在AI编程中Git 尤其重要 —— 因为AI有时候会改错代码。有了 Git你可以随时时光倒流回到之前正确的版本。这是你的后悔药。下载安装Windows 用户访问 https://git-scm.com/download/win下载 64-bit 版本的安装包双击安装安装过程中保持所有默认选项即可会有很多页配置不用改一直点 Next安装完成macOS 用户macOS 通常自带 Git。打开终端输入git --version如果有输出就不需要安装。如果没有执行# macOS 安装 Git通过 Xcode 命令行工具$ xcode-select--install弹出的对话框中点击安装即可。验证安装$git--version预期输出git version 2.43.0首次配置必须安装完成后需要告诉 Git 你是谁这些信息会记录在每次代码提交中# 设置你的名字用英文可以是昵称$gitconfig--globaluser.nameYour Name# 设置你的邮箱$gitconfig--globaluser.emailyour.emailexample.com提示这里的名字和邮箱不需要是真实的但建议和你将来注册 GitHub 的邮箱保持一致。Git 最小生存技能6条命令走天下你现在不需要精通 Git只要记住这6条命令就够了后面遇到会详细解释# 1. 在项目文件夹中初始化 Git 仓库只需要做一次$gitinit# 2. 查看当前文件状态哪些文件被修改了$gitstatus# 3. 把修改的文件添加到暂存区准备提交$gitadd.# 4. 提交一个版本附带说明信息$gitcommit-m描述这次修改做了什么# 5. 将代码推送到远程仓库如GitHub$gitpush# 6. 从远程仓库拉取最新代码$gitpull避坑使用AI编程工具时养成一个好习惯 ——在让AI做大的修改之前先git add . git commit -m 保存当前进度。这样即使AI改坏了你也能用git checkout .恢复到之前的状态。这是无数开发者总结出的血泪经验。0.2.3 Python 安装可选Python 在本教程的第六部分AI知识库项目中会用到。如果你暂时只想学前端项目可以先跳过。下载安装访问 https://www.python.org/downloads/下载最新版本建议 Python 3.11 或 3.12Windows 用户特别注意安装时务必勾选“Add Python to PATH”选项验证安装# Windows$ python--version# macOS / Linux可能需要用 python3$ python3--version预期输出Python 3.12.4# 验证 pipPython 包管理器$ pip--version预期输出pip 24.0 from ... (python 3.12)0.3 环境验证确认一切就绪完成上面的安装后让我们做一次全面的环境检查确保所有工具都正常工作。环境检查清单打开终端依次执行以下命令# 1. 检查 Node.js$node-v# 预期输出: v18.x.x 或更高版本# 2. 检查 npm$npm-v# 预期输出: 9.x.x 或 10.x.x 或更高版本# 3. 检查 Git$git--version# 预期输出: git version 2.x.x# 4. 检查 Python可选$ python--version# 预期输出: Python 3.11.x 或 3.12.x创建你的第一个项目文件夹# 在你喜欢的位置创建一个总的工作目录# Windows 建议$mkdirD:\ai-coding-projects# macOS 建议$mkdir~/ai-coding-projects# 进入这个目录$cdD:\ai-coding-projects# Windows$cd~/ai-coding-projects# macOS# 初始化 Git$gitinit预期输出Initialized empty Git repository in .../ai-coding-projects/.git/验证如果以上所有命令都能正常执行恭喜你环境准备工作全部完成。你现在拥有了进入AI编程世界的全部工具。环境准备完成度检查表Node.js 已安装版本 18npm 已安装Git 已安装并完成基本配置user.name 和 user.email已创建工作目录并初始化 Git如果有某一项未完成请回到对应章节重新操作。不要跳过这些步骤—— 后续每一步都依赖这些基础环境。参考资料尚硅谷AI Coding
返回列表