Claude Code从实战中理解–CC学习路线

从claude code实际应用开发中学习claude code基础理论和底层逻辑

本文将系统介绍如何借助Claude Code+Obsidianan等工具，从一键安装→ 系统教程→ 实战 tips→ 底层原理的路线来逆向学习claude code，只有在学中用才能更好的理解应用

1. Claude Code背景

1.1 Claude Code 安装

Claude Code不同系统的安装，以及调用不同大模型的方法请参考下面的内容

1.2 Claude Code基础使用

  1. 了解Claude Code的两种交互模式,一种是直接在bash终端进行交互；一种是进入Claude Code内进行/交互

  2. 了解Claude Code可使用的工具

Claude Code 可调用的工具

类别 Claude 可以做什么
文件操作 读取文件、编辑代码、创建新文件、重命名文件、重新组织项目结构
搜索 按模式查找文件、使用正则表达式搜索内容、探索和理解整个代码库
执行 运行 shell 命令、启动本地服务器、运行测试、使用 Git 进行版本控制操作
网络 搜索网络、获取官方文档、查找和解释错误消息
代码智能 编辑代码后查看类型错误和警告、跳转到定义、查找引用（需要代码智能插件支持）
  1. Claude Code启动三种模式
  • accept edits on 编辑模式
  • plan mode on 计划模式
  • bypass permissions on 绕过权限模式

1.3 npm和npx

JavaScript 是语言，Node.js 是让这个语言能在“浏览器之外”运行的环境,Node.js 的本质 = V8 JavaScript 引擎 + 操作系统能力封装 + 事件循环机制

┌────────────────────────┐
│   JavaScript 代码      │  ← 你写的代码
└─────────┬──────────────┘
          ↓
┌────────────────────────┐
│      V8 引擎           │  ← 负责执行 JS
└─────────┬──────────────┘
          ↓
┌────────────────────────┐
│     Node.js API        │  ← fs / http / path
└─────────┬──────────────┘
          ↓
┌────────────────────────┐
│       libuv            │  ← 事件循环 + 线程池
└─────────┬──────────────┘
          ↓
┌────────────────────────┐
│   操作系统 (OS Kernel) │  ← Linux / macOS / Windows
└────────────────────────┘
  1. npm

npm 全称是 Node Package Manager（Node.js 包管理器）, npm 最早由 Isaac Z. Schlueter 在 2010 年左右创建,让 JavaScript（Node.js）像 Python 的 pip、Ruby 的 gem 一样管理依赖

  • 2017 年被 GitHub 收购
  • 2020 年 GitHub 属于 Microsoft，所以 npm 现在属于 Microsoft 生态
  1. npx

npx 是 npm 5.2（2017 年）引入的一个工具

早期使用 npm 有一个痛点
如果你想运行一个工具包,必须npm install

npx = Node Package eXecute（执行器）,核心理念

不安装，也能直接运行 npm 包

  • 下载包（临时）
  • 执行
  • 用完即丢弃
对比 npm npx
作用 管理包 执行包
是否安装 安装依赖 不一定安装
是否长期存在 是 临时执行为主
典型用途 npm install npx create-*

2. Claude Code 第一步认知

davila7/claude-code-templates是Claude Code 的模板市场 + CLI 工具，提供 100+ 可一键安装的组件，增强 Claude Code 的开发工作流

适用于 Anthropic Claude Code 的即用型配置。包含全面的 AI 代理、自定义命令、设置、钩子、外部集成 (MCP) 和项目模板，可增强您的开发工作流程。

这里把该仓库作为第一步，主要是能够选择安装agent，MCP，command等内容，并且交互式的安装能够知道安装在哪里，从而切换目录查看安装文件是什么，有什么作用，怎么写的，从而能够更好的理解claude code的底层逻辑和原理

claude-code-templates提供了网页进行交互式的筛选，并提供了安装命令

claude code 模板市场

2.1 安装基础套件

  1. 安装最基础的开发栈

在命令行CLI输入下面的命令，主要是安装在当前目录下的.claude文件夹中，只限于当前目录的项目使用

npx claude-code-templates@latest --agent development-team/frontend-developer --command testing/generate-tests --mcp development/github-integration --yes

进入下面的安装过程，正常安装即可

════════════════════════════════════════════════════════════════
       🔮 Claude Code Templates


       Your starting point for Claude Code projects
════════════════════════════════════════════════════════════════

🚀 Setup Claude Code for any project language 🚀
                             v1.28.13

🌐 Templates: https://aitmpl.com
📖 Documentation: https://docs.aitmpl.com

🔧 Installing multiple components...
📦 Installing 3 components:
   Agents: 1
   Commands: 1
   MCPs: 1
   Settings: 0
   Hooks: 0
   Skills: 0
   Installing agent: development-team/frontend-developer
🤖 Installing agent: development-team/frontend-developer
📥 Downloading from GitHub (main branch)...
   Installing command: testing/generate-tests

  • --agent development-team/frontend-developer：安装一个专为前端开发设计的 AI 代理（Agent）。它会作为你的前端专家，协助处理 UI 组件、状态管理和现代前端架构等任务

  • --command testing/generate-tests：注册一个用于自动生成测试代码的自定义斜杠命令（如 /generate-tests），让你能随时让 AI 帮你编写测试用例

  • --mcp development/github-integration：配置 GitHub 集成的 MCP（Model Context Protocol）服务器，打通 Claude Code 与 GitHub 的连接，方便进行代码仓库交互和协作。

  1. 查看文件结构

在当前文件夹中，能够看到安装完成后会生成.claude文件，文件中包含着agent,command和.mcp.json等内容，分别对应着安装的agent，command和mcp

tree -ha ./
[4.0K]  ./
├── [4.0K]  .claude
│   ├── [4.0K]  agents
│   │   └── [ 14K]  frontend-developer.md
│   └── [4.0K]  commands
│       └── [2.6K]  generate-tests.md
└── [ 235]  .mcp.json

agent和command的文件，本质上就是md文档，包含了各自的内容，每个功能件的md都有各自的写法

2.2 解析功能文件

2.2.1 Agent文件解析

本地 agent 是通过 .claude/agents/ 目录下的 .md 文件定义的，Claude Code 会自动识别并使用它们

提示

有两种触发方式：

  1. 自动触发（推荐）

当你的任务匹配 agent 的 description 时，Claude 会自动用 Agent 工具调用它：

你: “帮我用 React 搭一个用户管理页面，需要 TypeScript 和响应式设计”

Claude 判断任务匹配 frontend-developer 的描述，自动调用。

  1. 手动指定

你也可以在对话中明确要求：

你: “用 frontend-developer agent 来做这个前端任务”

以当前的frontend-developer.md为例，解析其中的内容

---
name: frontend-developer
description: "Use when building complete frontend applications across React, Vue, and Angular frameworks requiring multi-framework expertise and full-stack integration. Specifically:\n\n<example>\nContext: Starting a new React frontend for an e-commerce platform with complex state management and real-time updates\nuser: \"Build a React frontend for product catalog with filtering, cart management, and checkout flow. Need TypeScript, responsive design, and 85% test coverage.\"\nassistant: \"I'll create a scalable React frontend with component architecture, server state via TanStack Query, client state via Zustand, responsive Tailwind v4 CSS styling, WCAG 2.2 accessibility compliance, and comprehensive testing with Vitest + Testing Library. First, let me query the context-manager for your existing infrastructure, design language, and API contracts.\"\n<commentary>\nUse frontend-developer when you need full frontend application development with multiple pages, complex state, user interactions, and integration with backend APIs. This agent handles the complete frontend lifecycle from architecture to deployment.\n</commentary>\n</example>\n\n<example>\nContext: Migrating legacy jQuery frontend to modern Vue 3 with existing PHP backend\nuser: \"We need to modernize our PHP web app's frontend from jQuery to Vue 3.5. The backend is stable. Need to maintain existing functionality while improving UX and code maintainability.\"\nassistant: \"I'll architect a Vue 3.5 migration strategy preserving backend contracts, gradually replace jQuery components with Vue Single File Components using the Composition API and reactive props destructure, implement TypeScript for type safety, add Pinia for state management, ensure 90% test coverage with Vitest, and maintain zero-downtime during rollout.\"\n<commentary>\nUse frontend-developer when modernizing existing frontend codebases across different frameworks. This agent excels at strategic migrations, maintaining backward compatibility, and integrating with established backend systems.\n</commentary>\n</example>\n\n<example>\nContext: Building shared component library for multi-team organization using different frameworks\nuser: \"Create a component library that works across our React, Vue, and Angular projects. Need consistent design tokens, accessibility, documentation, and framework-agnostic design patterns.\"\nassistant: \"I'll design a framework-agnostic component architecture with TypeScript interfaces, implement components in multiple frameworks maintaining API consistency, establish design token system with CSS custom properties, write Storybook documentation, create migration guides for teams, and ensure WCAG 2.2 compliance across all implementations — including Focus Appearance and Target Size Minimum criteria.\"\n<commentary>\nUse frontend-developer for multi-framework solutions, design system work, and component library architecture. This agent bridges different frontend ecosystems while maintaining consistency and quality standards.\n</commentary>\n</example>"
tools: Read, Write, Edit, Bash, Glob, Grep
---
  • name: frontend-developer：定义了该智能体的名称为“前端开发者”
  • tools: Read, Write, Edit, Bash, Glob, Grep: 赋予了该智能体在本地环境中执行操作的权限。它可以读取文件（Read）、写入/创建文件（Write）、编辑现有代码（Edit）、运行终端命令（Bash），以及使用 Glob 和 Grep 进行文件和内容的搜索匹配。这说明它不仅是个“聊天机器人”，还是一个能直接动手写代码、改配置的“工程师”。(现在Claude Code已经升级了非常多内置的功能工具，后续介绍)
  1. 核心描述

是Agent的“灵魂”，界定了它的专业领域：构建跨 React、Vue 和 Angular 框架的完整前端应用，并具备多框架专长及全栈集成能力

提示

采用这种包含 <example>、<commentary> 等标签的结构,遵循了大语言模型（LLM）提示词工程（Prompt Engineering）中的高级写法，能够清晰的定位每一个部分，就像书里的书本里的目录和批注

这里的描述通过提供三个完整的对话示例（User 提问 -> Assistant 回答），AI 能清晰地学习到它应该以什么样的语气、逻辑和专业深度来回应。这被称为“少样本提示（Few-Shot Prompting）”，能极大提高 AI 输出格式和内容的稳定性

每个例子开头的 <Context> 和结尾的 <commentary> 就是在划定界限。它在告诉调度器：“只有当用户需要从零搭建复杂应用、进行遗留代码迁移、或者构建跨框架组件库时，才激活我。”如果是简单的 CSS 居中问题或纯后端数据库设计，就不该触发这个角色

  1. Tools工具权限

Claude Code 工具链的发展历史，是一部从“简单的聊天原型”演变为“多智能体生产力主体”的进化史。从操作系统看，claude code tool对应Unix哲学

Claude Code 的工具（Tools）并不是一开始就有现在这套形态，它实际上经历了从 LLM 只能聊天 → 调用函数（Function Calling）→ AI Agent 使用工具（Tool Use）→ 软件工程 Agent 的演化过程

“Claude Code 内置工具 ≠ Agent Markdown 可写工具全集”

工具 作用 类似 Linux 命令
Read 读取文件内容 cat
Write 创建或覆盖文件 >
Edit 修改已有文件 sed / vim
Bash 执行 Shell 命令 bash
Glob 按模式查找文件 find
Grep 搜索文本内容 grep

而2026年的Claude Code已经内置了非常多的工具，涵盖了文件操作、搜索、执行、网络和代码智能等多个方面，能够满足开发过程中各种复杂的需求，官网中提供了更全面的介绍https://code.claude.com/docs/zh-CN/tools-reference ,下面是全部的Claude Code工具列表，按照功能分类：

文件操作(File Operations)
工具 作用
Read 读取文件
Write 创建/覆盖文件
Edit 修改文件
NotebookEdit 修改 Jupyter Notebook
LSP 代码智能分析（类型检查、跳转定义等）
搜索(Search)
工具 作用
Glob 按文件名模式查找
Grep 搜索文件内容
WebSearch 网页面搜索
WebFetch 网页抓取
执行(Execution)
工具 作用
Bash 执行终端命令
KillBash 停止后台任务
Agent(子智能体)
工具 作用
Agent / Task 创建子 Agent
任务(Task)
工具 作用
TaskCreate 创建任务
TaskGet 查看任务
TaskList 列出任务
TaskUpdate 更新任务
TodoWrite 更新Todo列表
工具 作用
EnterPlanMode 进入规划模式
ExitPlanMode 退出规划模式
AskUserQuestion 向用户提问

还有任务，定时任务等一些工具，基本是就全了

  1. 系统提示词（行为指令）

  1. 首先是角色设定，在文中的第一行，定义了它的身份、专长和关注点

  2. 模块分析

模块 作用 要点
Communication Protocol 强制先获取项目上下文 要求向 context-manager 发 JSON 请求，避免重复提问
Execution Flow 三阶段工作流 Context Discovery → Development → Handoff
Framework Expertise 三大框架最新特性 React 19, Vue 3.5, Angular 20 的核心 API
Tooling Defaults 工具链偏好 Vite 6, pnpm, Tailwind v4, Biome v2
State Management 状态管理架构 服务端/客户端分离，TanStack Query + Zustand/Pinia/Signals
Testing Stack 测试策略 Vitest + Testing Library + MSW v2 + Playwright
Performance Patterns 渲染策略决策树 SSR/SSG/SPA 选型 + Core Web Vitals 目标
Accessibility WCAG 2.2 AA 3 个新增标准（Focus Appearance, Target Size, Auth）
TypeScript Config TS 严格配置 strict + no implicit any + null checks
Real-Time Features 实时功能 WebSocket, SSE, 乐观更新
AI Guidelines AI 辅助开发规范 tsc 检查、CLS 风险、200 行上限审查

2.2.2 Command文件解析