开始前,先看下 Claude Code 花4分钟,全自动开发出来的小游戏。
前言
当今全世界AI编程哪家最强?是Deepseek、Cursor、还是 Gemini?都不是! Claude Code 以其强大的代码生成能力被众多开发者奉为神级工具。
你可能会以为 Claude Code 上手会很难,只有程序员才会使用。当然不是,新手小白也一样可以很轻松地使用。唯一要适应的是它默认的 CLI-命令行界面。
别慌,在 GitHub 上已经有大神开源了 Claude Code 的图形界面,想了解如何使用图形界面的朋友,可以先点个关注,下期给大家带来详细教程。
正文开始
今天这篇文章,就是为大家准备的 零基础入门保姆级教程。我结合了国内外大神的教程和我自己实测,用大白话给大家讲透彻。你只需要认真阅读并跟着操作,就能用 Claude Code 开发出你的第一款应用。
文末还给大家准备了免费的 大礼包。文章干货满满,建议大家先点个关注,方便之后查找和学习。
ok,废话不多说,让我们进入正题。今天的教程主要分为以下几个部分:
- 基础环境准备
- 安装 Node.js
- 安装 VS Code
- 安装 Claude Code
- 开发小游戏
1. 基础环境准备
Macbook + VS Code。这是目前我用下来最丝滑的组合,如果你用过 Cursor,会发现这套配置简直是无缝衔接。
当然,Claude Code 也支持 Windows 和 Linux。需要相关教程的朋友,可以在公众号后台回复“Windows”或“Linux”获取,本文我们以 Mac 为例。
2. 安装 Node.js
在安装 Claude Code 前,我们需要在本地先安装 Node.js,版本不能低于 V18。
前往 Node.js 官网,下载 Node.js 并安装。
[https://nodejs.org/zh-cn]

安装完成后,查看 Node.js 的版本号(推荐v22.16.0):
node -v
##

3. 安装 VS Code
访问 VS Code 官网,下载软件包,约 230M。
[https://code.visualstudio.com/]。

下载完成后,解压软件包

启用VS Code

安装完成后,前往插件市场,去安装两个重要插件:
3.1 安装简体中文语言包

###
3.2 安装 Claude Code 插件

###
重启后,看到 VS Code 已经是亲切的中文界面了

4. 安装和启动 Claude Code
先打开 VS Code,在启动 Claude Code 之前,先在本地创建一个项目文件夹。这里以名为 Teris 的文件夹为例。

用 VS Code 打开这个项目文件夹,同时在 VS Code 的终端里也用 CD命令切换到这个项目文件夹,稍后启动 Claude Code。

这样,VS Code 和 Claude Code 所处的目录一样,后续生成的文件和代码,可便捷 VS Code 文件区进行查看。
4.1 安装 Claude Code
执行安装命令:
npm install -g @anthropic-ai/claude-code
###
看到这个提示,就是代表Claude Code 装好了

###
4.2 配置与启动
启动 Claude Code ,根据你的喜好选择 Claude 主题,默认:深色模式

选择【默认设置】

将文件夹的权限授权给 Claude

Claude 已成功启动
让我们来查看下Claude Code 当前使用的大模型。太棒了,现在咱已经成功启动了Claude Code服务,并用上了 Claude Sonnet 4,这是目前最强大的 AI 编程大模型。

5. 开发小游戏
5.1 输入准备的 Prompt
请帮我用纯 JavaScript、HTML 和 CSS 实现一个经典的俄罗斯方块 Web 游戏。
5.2 Claude Code 开始表演

5.3 展示效果
复制到浏览器打开。
一款经典的俄罗斯方块小游戏,一句提示词,花了 4分钟,就搞定了。

全文总结
今天的教程展示了 Claude Code 的强大之处,仅仅一句提示词、4分钟的时间,就能全自动开发出一款经典游戏,而且没有任何 Bug。其安装配置也不复杂,即便是零基础也完全不用担心,跟着教程你也能轻松上手。
如果大家觉得还不过瘾,欢迎关注我,后续将持续为你带来更多 Claude Code 的进阶使用方法和实战案例!
以上,就是关于 Claude Code 的零基础入门分享。
如果你喜欢今天的分享,麻烦点个赞👍,点个在看,你的支持就是我更新的最大动力!
下期预告
1. 如何启用图形界面:告别命令行,拥抱可视化界面
2. 如何添加 MCP 服务:让你的 Claude Code 接入更多服务,功能更强大。
3. 如何生成 PRD(产品需求文档):不仅仅是代码,Claude 还能帮你写文档!
4. 如何生成 UI 设计稿:一句话生成完整的界面设计。
5. Claude Code 使用技巧集:一些不为人知的高阶技巧,让你效率翻倍。
提交反馈
图文最强编程 AI-Claude Code 零基础入门教程,小白也能4分钟开发游戏!
评论区
暂无公开评论还没有公开评论。