Skip to main content

Claude Code 介绍

Claude Code 是 Anthropic 的智能体式终端编码工具——一个命令行界面，将 Claude 的智能直接引入你的开发工作流。与在浏览器窗口中运行的聊天式 AI 助手不同，Claude Code 驻留在你的终端中，读取你的代码库、执行命令、编辑文件，并自主管理复杂的多步骤开发任务。

对于 Shopify 开发者来说，Claude Code 是变革性的。它理解 Shopify 生态系统——Liquid 模板、GraphQL Admin API Schema、Polaris 组件、App Bridge、Shopify Functions 和主题架构——并且可以在你的实际项目上下文中同时使用所有这些技术。

为什么要用 Claude Code 进行 Shopify 开发？​

传统的 AI 编码助手需要你来回复制粘贴代码片段。Claude Code 完全消除了这种摩擦：

  • 直接文件访问：Claude Code 直接在原位读取和编辑你的项目文件
  • 命令执行：它可以运行 shopify app dev、npm test、GraphQL 内省查询和任何其他终端命令
  • 多文件感知：它理解你的 Liquid 区段如何与 JavaScript 关联、你的应用扩展如何连接到后端、以及你的 GraphQL 查询如何映射到数据模型
  • 迭代开发：它可以在单个会话中完成脚手架搭建、测试、调试和优化
什么让 Claude Code 成为"智能体式"？

"智能体式"一词意味着 Claude Code 不仅仅是回答问题——它采取行动。当你要求它"在产品页面添加一个 metafield"时，它会读取你的主题文件、找到正确的区段、编写 Liquid 代码、更新 Schema，并验证更改是否正确编译。它会规划、执行和验证。

安装​

Claude Code 需要 Node.js 18 或更高版本。通过 npm 全局安装：

安装 Claude Code
npm install -g @anthropic-ai/claude-code

或者，如果你不想全局安装：

无需全局安装运行
npx @anthropic-ai/claude-code
系统要求
  • Node.js：版本 18.0.0 或更高
  • 操作系统：macOS、Linux 或通过 WSL2 的 Windows
  • 终端：任何终端模拟器（iTerm2、Terminal.app、Warp、Windows Terminal）
  • Git：建议安装以支持版本控制集成

认证​

安装后，在任意目录中启动 Claude Code：

启动 Claude Code
claude

首次启动时，Claude Code 会提示你进行认证。你有两个选项：

选项 1：Anthropic API 密钥（直接）​

使用 API 密钥认证
export ANTHROPIC_API_KEY=sk-ant-api03-your-key-here
claude

你也可以将其添加到 shell 配置文件（~/.zshrc 或 ~/.bashrc）以持久化：

添加到 shell 配置文件
echo 'export ANTHROPIC_API_KEY=sk-ant-api03-your-key-here' >> ~/.zshrc
source ~/.zshrc

选项 2：Claude Pro/Max 订阅（OAuth）​

如果你有 Claude Pro 或 Max 订阅，Claude Code 可以通过你的 Anthropic 账户使用 OAuth 进行认证。只需运行 claude 并按照基于浏览器的登录流程操作。如果你已经付费订阅了 Claude，这是最简单的选项。

启动并通过浏览器认证
claude
# 在浏览器中按照 OAuth 提示操作
推荐用于 Shopify 开发

Claude Max 计划（$100/月或 $200/月）为重度 Shopify 开发提供最佳体验。高级 Max 计划给你显著更多的使用量，这在处理消耗大量上下文的大型 Shopify 代码库时很重要。Max 计划的使用量通常足以支持一整天的密集开发。

理解 CLAUDE.md 项目文件​

CLAUDE.md 文件是使用 Claude Code 进行有效 Shopify 开发的最重要配置。它位于你的项目根目录中，提供 Claude Code 在每个会话开始时读取的持久上下文。

把 CLAUDE.md 想象成一份给加入你团队的专家开发者的简报文件。它告诉 Claude Code：

  • 项目是什么以及结构如何
  • 应遵循哪些编码标准和约定
  • 使用了哪些 Shopify API 和版本
  • 如何运行、测试和部署项目
  • 常见陷阱和项目特定规则
Shopify 应用的 CLAUDE.md 示例
# Project: My Shopify App

## Overview
Remix-based Shopify app for inventory management.
Uses Shopify API version 2025-01.

## Tech Stack
- Framework: Remix (Shopify app template)
- Database: Prisma with SQLite (dev) / PostgreSQL (prod)
- UI: Shopify Polaris React components
- Auth: Shopify App Bridge + session tokens

## Commands
- `npm run dev` - Start development server
- `npm run build` - Production build
- `shopify app dev` - Start with Shopify CLI
- `npm test` - Run Vitest suite
- `npx prisma db push` - Sync database schema

## Coding Standards
- Use TypeScript strict mode
- All API calls must use the authenticated admin client
- Use Polaris components exclusively for UI (no custom CSS for standard patterns)
- GraphQL queries go in `app/graphql/` directory
- Validate all webhook payloads with HMAC verification

## API Version
Always use API version 2025-01. Do not use unstable.

CLAUDE.md 层次结构​

Claude Code 支持 CLAUDE.md 文件的层次结构：

位置作用范围使用场景
~/.claude/CLAUDE.md全局跨所有项目的个人偏好
./CLAUDE.md项目根目录项目特定的上下文和规则
./src/CLAUDE.md子目录模块特定的指导

文件从上到下合并，更具体的文件优先级更高。

上下文窗口管理​

Claude Code 在一个上下文窗口中运行——它可以在内存中保存的文本（代码、对话、文件内容）的总量。有效的上下文管理对于高效的 Shopify 开发会话至关重要。

上下文如何被消耗​

每次交互都会增加上下文：

  • 你的提示和 Claude 的回复
  • Claude 读取的文件内容
  • 终端执行的命令输出
  • 错误消息和日志

一个大型 Shopify 主题可能有 50+ 个 Liquid 文件。一次性读取所有文件会消耗大量上下文。Claude Code 在这方面很智能——它按需读取文件，而不是预先加载所有内容。

上下文管理命令​

基本上下文命令
# 检查当前费用和 token 使用量
/cost

# 压缩对话（总结历史以释放上下文）
/compact

# 清除整个对话并重新开始
/clear
何时使用 /compact 和 /clear

当你在任务进行中想要释放上下文同时保留已讨论内容的要点时，使用 /compact。当你切换到完全不同的任务且不需要任何先前上下文时，使用 /clear。

Shopify 开发的良好节奏：在完成每个独立功能或 bug 修复后使用 /compact，在主题开发和应用开发之间切换时使用 /clear。

大型 Shopify 项目的策略​

  1. 专注于会话：不要让 Claude Code "重构整个主题"，而是一次专注于一个区段
  2. 大量使用 CLAUDE.md：将稳定的上下文（API 版本、约定、文件结构）放在 CLAUDE.md 中，这样就不需要重复
  3. 在里程碑后使用 /compact：完成一个功能后，在进入下一个之前压缩上下文
  4. 明确指定文件路径：说"编辑 sections/product-main.liquid"而不是"编辑产品页面"，以避免不必要的文件搜索

费用和使用层级​

Claude Code 的使用按处理的 token 计费（输入和输出）。了解定价有助于你有效地控制预算。

订阅计划​

计划月费最适合
Claude Pro$20/月轻度使用，偶尔的编码辅助
Claude Max (5x)$100/月常规开发，大多数 Shopify 开发者
Claude Max (20x)$200/月每日大量使用，全职 Shopify 开发

API 密钥定价​

如果直接使用 API 密钥，按 token 付费：

模型输入（每百万 token）输出（每百万 token）
Claude Sonnet 4$3.00$15.00
Claude Opus 4$15.00$75.00
注意你的使用量

一次密集的 Shopify 开发会话（构建一个完整的应用功能）可以处理数十万个 token。使用 API 密钥定价时，费用可能会快速累积。对于常规开发工作，Max 订阅几乎总是比 API 密钥使用更具成本效益。

监控使用量​

在开发过程中经常使用 /cost 命令：

> /cost
Session cost: $2.34
Total tokens: 145,230 input / 23,456 output

快速开始：你的第一个 Shopify 会话​

以下是验证一切正常工作的完整工作流：

第一个 Shopify + Claude Code 会话
# 1. 导航到你的 Shopify 项目
cd ~/my-shopify-app

# 2. 创建 CLAUDE.md 文件
echo "# My Shopify App\nRemix-based app using API version 2025-01" > CLAUDE.md

# 3. 启动 Claude Code
claude

# 4. 让 Claude Code 探索你的项目
> Explore this project structure and summarize what you find

# 5. 开始构建
> Create a new page in the app that displays a list of products using GraphQL and Polaris components

Claude Code 将读取你的项目文件、理解结构、编写代码，甚至可以运行开发服务器来验证结果。欢迎来到智能体式 Shopify 开发。

下一步​

现在 Claude Code 已安装并配置完毕，请继续阅读 Shopify 开发工作流 来学习使用 Claude Code 进行主题开发、应用构建和调试的具体模式。