VibeCoding零基础实战开发

VibeCoding零基础实战开发 1.NodeJS部署打开终端WindowsWindows 10 系统的同学可以在应用商店内搜索并安装Windows Terminal软件Win11 自带名字叫做终端找到软件终端并打开Win10 系统没有自带请参考上图在应用软件内下载安装即可2.打开终端程序如下图默认标题栏显示 Windows PowerShellWindows 的终端分为 2 种类型CMD传统的老式命令提示符PowerShell微软推出的新一代命令行为了更好的兼容现代化软件和Claude Code的特性课程选择 Windows 中的PowerShell作为终端使用我们安装的这个终端软件默认打开的就是PowerShell如果需要打开老式的CMD 命令提示符可以按下图所示操作Mac找到应用程序终端打开点击打开即可打开终端程序Windows 部署安装找到资料 \NodeJS中提供的node-v24.16.0-x64.msi文件双击打开运行一路下一步即可如下系列图验证修复 PowerShell 脚本运行禁止问题以管理员身份打开终端打开后执行如下命令Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser验证 NodeJS 部署打开终端软件分别执行如下两条命令node -v npm -v如下图显示版本号表示部署成功Mac 部署安装找到资料 \NodeJS中的node-v24.16.0.pkg双击打开运行一路下一步进行安装即可如下系列图示安装完成验证打开终端软件执行node -vnpm -v查看输入如下图显示版本号即表示成功2.Python环境部署本指南适用于 Windows 和 macOS 系统通过本地安装包部署 Python 环境。所有安装包均位于资料\Python环境文件夹内。Windows 系统安装找到python-3.14.6-amd64.exe安装包文件双击运行打开如上图勾选 2 个框后点击Customize installation如下图选择安装路径不要带有中文不建议安装在 C 盘课程示例安装在D:\dev\sdk\Python\Python314验证打开终端软件执行如下命令python --version pip --version如下图显示 python 版本和 pip 版本即一切正常Mac 系统安装找到python-3.14.6-macos11.pkg安装包双击打开运行验证搜索并找到 终端 软件打开运行如下图执行python3 --version如下图输出版本号即成功现在可以优化将 python3 命令更改为 python 命令复制并执行如下代码echo alias pythonpython3 ~/.zshrc source ~/.zshrcecho alias pippip3 ~/.zshrc source ~/.zshrc执行python --version能输出版本号即成功如下图3.git部署Windows 系统安装找到git官网然后下载Git-2.54.0-64-bit.exe双击打开运行后续的操作全部一路下一步即可详情见下面系列图验证打开终端软件执行如下命令git -v如下图显示版本号即表示成功Mac 系统安装搜索并找到终端软件打开运行如下图执行xcode-select --install如下图弹窗点击安装一般 10 分钟搞定验证在终端输入命令git -v显示版本号即表示成功4.Claude Code部署官方文档参考https://code.claude.com/docs/zh-CN/overviewClaude Code 部署Windows 部署打开终端程序执行如下命令# 如果网络环境不太好可以先执行这条命令 npm config set registry https://registry.npmmirror.com # 执行如下命令开始安装claude code npm install -g anthropic-ai/claude-code如图执行后等待大概 1~5 分钟视网络速度验证执行如下命令输出 claude code 的版本号claude --version至此安装成功Mac 部署打开终端程序执行如下命令# 如果网络环境不太好可以先执行这条命令 npm config set registry https://registry.npmmirror.com # 执行如下命令开始安装claude code sudo npm install -g anthropic-ai/claude-code如图执行上条命令需要输入 Mac 系统的密码正常输入即可无任何反馈输入完成后如下图大概等待 1~5 分钟即可安装完成验证执行如下命令输出 claude code 的版本号claude --version至此安装成功注册 DeepSeek APIKEY课程选择国内 DeepSeek API 作为 Claude Code 编程的模型提供商原版 Claude Code 模型国内无法使用中转服务..原因..不稳定选择国内模型最为稳定目前 DeepSeek V4 Pro 和 V4 Flash 在编程方面不落后 Claude Code 原版模型太多足够使用了请自行注册 DeepSeek 开放平台账户并酌情充值一定额度用于 Token 消耗平台地址https://platform.deepseek.com创建 APIKEY如下图为 APIKEY 设置一个名字随意点击创建后会显示 APIKEY请复制并保存好APIKEY 只显示这一次如果遗忘需要重新创建一个如下图APIKEY 创建完成Claude Code 配置本文参考 DeepSeek 官方文档接入 Agent 工具 | DeepSeek API Docs请修改并复制如下内容{ env: { ANTHROPIC_BASE_URL: https://api.deepseek.com/anthropic, ANTHROPIC_AUTH_TOKEN: 你的 DeepSeek API Key, ANTHROPIC_MODEL: deepseek-v4-pro[1m], ANTHROPIC_DEFAULT_OPUS_MODEL: deepseek-v4-pro[1m], ANTHROPIC_DEFAULT_SONNET_MODEL: deepseek-v4-pro[1m], ANTHROPIC_DEFAULT_HAIKU_MODEL: deepseek-v4-flash[1m], CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC: 1, CLAUDE_CODE_EFFORT_LEVEL: max } }其中上面第二个命令注意替换内容为你的 APIKEY打开如下文件如果文件或文件夹没有请直接新建即可Windows 系统C:\Users\你的用户名\.claude\settings.jsonMac 系统~/.claude/settings.json将上述内容复制到文件中并保存即可对于 Mac 系统可以按如下流程操作1. 打开终端软件一定要是全新打开的 2. 执行 mkdir .claude 3. 执行 cd .claude 4. 执行 touch settings.json 5. 执行 open settings.json如上 5 步操作后会弹出文本编辑的窗口复制上面的代码到窗口内替换你的 API 并保存即可Claude Code 测试打开终端执行mkdir test执行cd test执行claude进入 claude code 界面第一次进入如下图选择文本风格建议选择编号 1 自动控制按键盘上下键控制然后回车会弹出一些安全警告直接按回车即可如下图选择yes信任文件夹如下图此时可以正常使用 claude code 了。先问一个简单问题你是什么大模型可以正常显示是DeepSeek表示和 DeepSeek 的集成一切 OK可以正常使用了5.Claude Code和VScode集成VIsual Studio CodeVSCode安装安装包在资料 \ VSCode中已经提供Windows 系统选择VSCodeUserSetup-x64-1.124.2.exeMac 系统选择VSCode-darwin-universal.dmg或自行去官网下载https://code.visualstudio.comWindows 系统安装打开安装包同意协议点击下一步Mac 系统安装找到安装包双击打开如下图等待进度条完成然后在应用程序中找到 Visual Studio Code 即可打开启动 VSCode此操作 Windows Mac 一致以 Windows 为例打开 VSCode 后修改 VSCode 为中文版此操作 Windows 和 Mac 系统一致以 Windows 系统为例在插件市场搜索chinese点击install安装如下图安装后点击Change Language and Restart软件会自动重启即完成中文汉化操作VSCode 集成 Claude Code插件安装在 VSCode 的插件市场中搜索claude找到插件Claude Code For VS Code由Anthropic公司发布点击安装即可。弹出提示选择信任弹出提示选择信任将 Claude Code 插件移动到右侧边栏测试说明可以正常应用设置集成到 DeepSeek读取的之前配置的.claude/settings.json 文件显示如果找不到claude code的 UI可以按快结局ctrl shift p呼出命令面板选择如下图所示的命令后即可恢复 claude 的窗口。完成