Claude Code零基础入门：从安装到跑通第一个AI编程项目

graph TB
    subgraph "Claude Code 使用方式"
        A[终端 CLI<br/>claude命令] --> B[核心引擎]
        C[VS Code 扩展] --> B
        D[JetBrains 插件] --> B
        E[Desktop App<br/>桌面应用] --> B
        F[Web 模式<br/>浏览器] --> B
    end

    subgraph "核心能力"
        B --> G[文件读写]
        B --> H[命令执行]
        B --> I[代码搜索]
        B --> J[Git操作]
        B --> K[MCP工具调用]
    end

    style B fill:#f9a825,stroke:#333,color:#000
    style A fill:#4caf50,stroke:#333,color:#fff
    style C fill:#2196f3,stroke:#333,color:#fff
    style D fill:#9c27b0,stroke:#333,color:#fff
    style E fill:#ff5722,stroke:#333,color:#fff
    style F fill:#607d8b,stroke:#333,color:#fff

curl -fsSL https://claude.ai/install.sh | sh

brew install claude-code

curl -fsSL https://claude.ai/install.sh | sh

# 添加Anthropic的apt源
curl -fsSL https://apt.claude.ai/gpg | sudo gpg --dearmor -o /usr/share/keyrings/claude.gpg
echo "deb [signed-by=/usr/share/keyrings/claude.gpg] https://apt.claude.ai stable main" | sudo tee /etc/apt/sources.list.d/claude.list
sudo apt update && sudo apt install claude-code

irm https://claude.ai/install.ps1 | iex

winget install Anthropic.ClaudeCode

# 进入WSL
wsl
# 然后使用Linux安装命令
curl -fsSL https://claude.ai/install.sh | sh

claude --version

Claude Code v2.1.19

# 添加到 ~/.bashrc 或 ~/.zshrc
export PATH="$HOME/.claude/local/bin:$PATH"
source ~/.bashrc  # 或 source ~/.zshrc

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

flowchart LR
    A[开始安装] --> B{操作系统?}
    B -->|macOS| C[curl安装<br/>或 brew install]
    B -->|Linux| D[curl安装<br/>或 apt/yum]
    B -->|Windows| E{安装方式?}
    E -->|原生| F[PowerShell irm]
    E -->|WinGet| G[winget install]
    E -->|WSL2| H[Linux命令]

    C --> I[验证: claude --version]
    D --> I
    F --> I
    G --> I
    H --> I

    I --> J{成功?}
    J -->|是| K[进入认证环节]
    J -->|否| L[检查PATH或重新安装]
    L --> I

    style K fill:#4caf50,stroke:#333,color:#fff
    style L fill:#ff9800,stroke:#333,color:#fff

claude

# 设置API Key环境变量
export ANTHROPIC_API_KEY="sk-ant-api03-xxxxx"

echo 'export ANTHROPIC_API_KEY="sk-ant-api03-xxxxx"' >> ~/.bashrc
source ~/.bashrc

claude

╭──────────────────────────────────────╮
│  >  Welcome to Claude Code!          │
│                                      │
╰──────────────────────────────────────╯

> 你好，请介绍一下你自己

# 从VS Code扩展市场安装
code --install-extension anthropic.claude-code

graph TB
    subgraph "IDE集成对比"
        direction LR
        A["终端 CLI<br/>✅ 完整功能<br/>✅ 灵活<br/>❌ 纯文本界面"]
        B["VS Code<br/>✅ 可视化Diff<br/>✅ 快捷键<br/>✅ 项目感知"]
        C["JetBrains<br/>✅ 可视化Diff<br/>✅ 项目感知<br/>✅ 深度集成"]
        D["Desktop App<br/>✅ 图形界面<br/>✅ 无需终端<br/>✅ 适合非开发者"]
    end

    style A fill:#4caf50,stroke:#333,color:#fff
    style B fill:#2196f3,stroke:#333,color:#fff
    style C fill:#9c27b0,stroke:#333,color:#fff
    style D fill:#ff5722,stroke:#333,color:#fff

# 项目：我的博客系统

## 技术栈
- 前端：React + TypeScript
- 后端：Node.js + Express
- 数据库：PostgreSQL

## 规范
- 使用中文注释
- 代码风格遵循 ESLint 配置
- 测试框架使用 Jest
- API 使用 RESTful 风格

## 目录结构
- src/components/ - React组件
- src/api/ - API路由
- src/models/ - 数据模型

⚠️  Claude Code wants to read files in /home/user/my-project
    Allow? [y/n]

# 查看当前权限设置
/permissions

# 信任某个目录（不再每次询问）
/trust

# 创建项目目录
mkdir md-notes && cd md-notes

# 启动Claude Code
claude

> 帮我在当前目录创建一个CLAUDE.md文件，描述以下项目：
> - 项目名称：md-notes
> - 用途：一个命令行Markdown笔记管理工具
> - 技术栈：Node.js + TypeScript
> - 功能：创建笔记、列出笔记、搜索笔记、删除笔记
> - 所有笔记存储在 ~/.md-notes/ 目录下
> - 代码注释用中文

> 根据CLAUDE.md中的描述，初始化这个Node.js + TypeScript项目。
> 包括：package.json、tsconfig.json、src目录结构和基本入口文件。
> 不要安装依赖，先创建文件结构。

创建文件：package.json
创建文件：tsconfig.json
创建目录：src/
创建文件：src/index.ts
创建文件：src/commands/
创建文件：src/utils/

> 现在实现所有功能：创建笔记、列出笔记、搜索笔记、删除笔记。
> 每个命令一个文件，放在 src/commands/ 下。
> 主入口 src/index.ts 负责解析命令行参数并路由到对应命令。
> 使用 chalk 库给输出加颜色，使用 commander 库处理命令行参数。
> 先安装依赖，然后实现所有代码。

$ mkdir md-notes && cd md-notes
$ claude

╭──────────────────────────────────────╮
│  >  Welcome to Claude Code!          │
╰──────────────────────────────────────╯

> 帮我创建一个Node.js CLI工具，用于管理Markdown笔记

Claude Code 正在分析当前目录...
✗ 当前目录为空

我将创建一个完整的CLI工具项目。让我开始：

1. 创建 package.json
   ✓ package.json 已创建

2. 创建 tsconfig.json
   ✓ tsconfig.json 已创建

3. 安装依赖
   $ npm install commander chalk
   $ npm install -D typescript @types/node ts-node
   ✓ 依赖安装完成

4. 创建源代码结构
   ✓ src/index.ts
   ✓ src/commands/create.ts
   ✓ src/commands/list.ts
   ✓ srccommands/search.ts
   ✓ src/commands/delete.ts

5. 更新 package.json 的 bin 字段
   ✓ package.json 已更新

项目创建完成！你可以通过以下命令测试：
  npx ts-node src/index.ts create "我的第一篇笔记"
  npx ts-node src/index.ts list
  npx ts-node src/index.ts search "关键词"
  npx ts-node src/index.ts delete "笔记标题"

> 帮我测试一下所有功能是否正常工作。
> 创建几篇示例笔记，然后测试列表、搜索和删除。

# 编译TypeScript
npx tsc

# 创建笔记
node dist/index.js create "学习笔记" --content "今天学习了Claude Code"

# 列出所有笔记
node dist/index.js list

# 搜索笔记
node dist/index.js search "Claude"

# 删除笔记
node dist/index.js delete "学习笔记"

md-notes/
├── CLAUDE.md          # 项目上下文描述
├── package.json       # 项目配置
├── tsconfig.json      # TypeScript配置
├── src/
│   ├── index.ts       # 主入口，命令路由
│   └── commands/
│       ├── create.ts  # 创建笔记
│       ├── list.ts    # 列出笔记
│       ├── search.ts  # 搜索笔记
│       └── delete.ts  # 删除笔记
└── dist/              # 编译输出（gitignore）

flowchart TD
    A[用户输入命令] --> B[commander 解析]
    B --> C{命令类型?}
    C -->|create| D[创建.md文件<br/>保存到 ~/.md-notes/]
    C -->|list| E[读取目录<br/>格式化输出列表]
    C -->|search| F[遍历文件<br/>关键词匹配]
    C -->|delete| G[确认后删除<br/>对应.md文件]

    D --> H[chalk 彩色输出结果]
    E --> H
    F --> H
    G --> H

    style A fill:#2196f3,stroke:#333,color:#fff
    style B fill:#ff9800,stroke:#333,color:#fff
    style H fill:#4caf50,stroke:#333,color:#fff

# 检查安装路径
ls ~/.claude/local/bin/

# 手动添加PATH
echo 'export PATH="$HOME/.claude/local/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

# 重新登录
claude auth login

# 检查认证状态
claude auth status

# 使用API Key方式
export ANTHROPIC_API_KEY="your-key-here"

# 在项目目录下信任当前目录
claude
> /trust

# 或手动编辑 settings.json
# 路径：~/.claude/settings.json
{
  "trustedDirectories": ["/home/user/my-project"]
}

> /undo

git checkout -- 被修改的文件

> /compact    # 压缩当前上下文
> /clear      # 完全清除上下文重新开始
> /cost       # 查看当前消耗

❌ 差：帮我做一个完整的电商系统
✅ 好：先创建用户注册的API接口，使用Express + TypeScript

❌ 差：修bug
✅ 好：运行测试发现 src/auth.ts:42 抛出 TypeError，帮我修复

flowchart TD
    A[开始使用Claude Code] --> B[安装与认证]
    B --> C[创建项目目录]
    C --> D[git init]
    D --> E[编写CLAUDE.md]
    E --> F[用claude初始化项目]
    F --> G[分步实现功能]
    G --> H[测试验证]
    H --> I{通过?}
    I -->|是| J[git commit]
    I -->|否| K[描述问题让AI修复]
    K --> H
    J --> L[继续下一个功能]
    L --> G

    style A fill:#2196f3,stroke:#333,color:#fff
    style J fill:#4caf50,stroke:#333,color:#fff
    style K fill:#ff9800,stroke:#333,color:#fff