Claude Code实战：从零开始用AI构建Vue3 Markdown编辑器

现在说起AI编程助手，Claude Code绝对是许多开发者工具箱里的首选。甚至在技术面试中，一句“你有没有用过Claude Code？”都可能成为衡量你技术视野的新参考。它已经不仅仅是一个工具，更像是一个能深度理解并操作你代码库的智能伙伴。本文将分享一次使用Claude Code进行实战开发的全过程，希望对你有所帮助。

Claude Code简介

Claude Code是由Anthropic公司推出的一款代理式（Agentic）命令行编程工具。它不仅仅是一个聊天工具，而是一个能够直接在你的终端中运行、深度理解整个代码库上下文、并自主执行复杂工程任务的智能开发助手。它能够读取项目文件、编写和修改代码、运行测试命令、调试错误，甚至能根据自然语言自动规划并执行多步骤的开发任务。

它的主要特性如下：

• 全项目上下文感知：能够递归读取并深度理解整个代码库架构，理解复杂代码结构、依赖关系和架构模式。
• 自主代理执行能力：可自主规划多步开发任务，直接在本地终端执行代码编写、测试运行及BUG修复等操作。
• 无缝终端集成：直接运行在开发者熟悉的命令行界面中，无需在IDE和浏览器之间来回切换。
• 强大的版本控制协作：能够自动执行 git add、git commit、git push 等操作，甚至可以自动生成清晰的提交信息。
• 安全与可控性：遵循“人类在环”原则，所有关键修改与高风险操作均需用户确认。

安装

接下来介绍下Claude Code的安装，我们将采用Node.js来安装。

• 使用Node.js来安装Claude Code非常方便，建议下载 v20.x 以上版本，下载地址：https://nodejs.org/zh-cn/download/

• 安装成功后，可以通过如下命令来安装Claude Code：

npm install -g @anthropic-ai/claude-code

• 安装完成后，可以通过如下命令来检测Claude Code是否安装成功：

claude --version

• 接下来我们需要创建配置文件对Claude Code的 API_KEY 和 Model_Name 进行配置，我这里以 火山方舟 平台的配置为例，路径： C:\Users\<用户名>\.claude\settings.json

{
    "env": {
        "ANTHROPIC_AUTH_TOKEN": "<ARK_API_KEY>",
        "ANTHROPIC_BASE_URL": "https://ark.cn-beijing.volces.com/api/coding",
        "ANTHROPIC_MODEL": "<Model_Name>"
    }
}

• 然后再创建配置文件，绕过官方首次启动限制（默认需要登录），路径： C:\Users\<用户名>\.claude.json

{
    "hasCompletedOnboarding": true
}

• 配置完成后，使用如下命令即可启动Claude Code，首次启动会询问你是否要信任该文件夹，选择yes即可：

claude

• 选择完成后就可以进入Claude Code的命令行界面了，至此Claude Code就可以正常使用了。

基本使用

这里我们以一个Web版本的Markdown编辑器的开发为例，来介绍下Claude Code的使用。

• 首先我们输入如下提示词：

用户需求：开发一个Markdown编辑器

功能描述：
- 左侧为Markdown编辑器编辑器，右侧为Markdown预览区
- Markdown文件的列表、编辑、删除、保存功能
- Markdown文件的重命名功能
- 支持深色和浅色两种主题模式

UI设计规范遵循Material Design（谷歌）

开发技术栈：Vue3+Element-Plus+TypeScript

• 此时Claude Code会先给我们编写一份规格文档，Claude Code不仅考虑到了UI上的设计细节，还考虑到了功能验收，确认无误后让它执行即可。

• Claude Code在执行过程中如果需要创建文件的话，会询问你，这里为了方便起见，可以允许它执行当前会话中的所有的编辑操作。

• 经过Claude Code的一系列操作之后，项目终于运行起来了，一次就成功了。

• 打开链接看下，效果还是挺不错的。

• 发现一些需要优化的地方，左侧文件列表重命名、删除按钮太小了，代码没有高亮功能，让Claude Code再修改下。

内置命令

Claude Code里面有几个内置命令非常有用，这里给大家分享一下！

• 如果你在Claude Code写代码的时候，想提问并让它立马回答你，可以试试 /btw 命令。

• 如果你对开发的项目只有大概的想法，可以使用 /plan 命令切换到规划模式，Claude Code会进行提问帮你梳理需求（类似于头脑风暴），plan模式相当于只聊天不执行。

• 通过 /model 命令可以切换模型。

• 通过 /config 命令可以打开配置，例如开关思考模式（建议开启，不开启会根据直觉来回答问题）。

• 使用 /context 可以查看上下文使用情况，相当于Claude Code的“记忆”，占用过多会导致Claude Code响应变慢。

• 通过 /compact 可以压缩上下文，日常开发中上下文占用保持在 20%-40% 比较合理。

• 通过 /clear 可以清除上下文，该操作会让Claude Code“彻底失忆”，在一个大功能开发完毕或者Claude Code开始“胡说八道”时可以使用。
• 通过 /rewind 可以进行操作回滚，例如我们新添加了一个功能，然后又不想要了可以使用。

• 通过 /resume 可以恢复之前的会话，通常在新开启会话时使用，也可以使用 claude -c 直接开启会话。

总结

通过这次实战，我们可以看到Claude Code能够显著提升开发效率，尤其是从零搭建一个具备完整功能的前端应用。它不仅仅能生成代码，更能理解项目上下文、规划任务并自主执行修改，让你从重复性的脚手架搭建和基础编码工作中解放出来。如果你对Node.js和Vue3等现代Web技术栈感兴趣，不妨尝试用它来启动你的下一个项目。在云栈社区，你也能找到更多关于AI辅助开发的实践讨论与资源。

参考资料

https://code.claude.com/docs/zh-CN/overview