一、安装与上手（5 分钟搞定）

1.1 安装

Claude Code 是个 npm 包，全局安装即可（需要 Node.js 18+）：

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

装完在终端敲：

claude

首次启动会让你登录 Anthropic 账号授权，跟着走完就能用了。

1.2 第一次跑：让它认识你的项目

进到你的项目根目录（哪怕是个空文件夹也行），启动 claude，然后第一件事不是让它写代码，而是让它"认识项目"：

请帮我分析当前项目结构，总结技术栈、目录约定、依赖情况，并生成一份 CLAUDE.md 项目说明文件。

或者直接用内置命令：

/init

它会扫描项目，生成一个 CLAUDE.md 文件。这个文件非常关键，后面细讲。

1.3 三种权限模式，先了解一下

Claude Code 有几种执行模式（在交互界面用 Shift + Tab 切换）：

• 默认模式：每次改文件 / 跑命令前会问你确认（最安全，新手建议先用这个）

• 自动接受编辑（Auto-accept edits）：文件修改自动通过，但跑命令仍会问

• Plan mode（计划模式）：只读、只规划，不动手，让它先出方案

我的习惯：先用 Plan mode 让它出方案，确认思路对了再切回默认模式让它动手。 这一招能避免它跑偏后白干一大堆。

二、实战：从 0 搭一个 Vue3 + TS 项目

下面是核心案例。我用 Claude Code 从零搭了一个项目，让它帮我生成路由层、组件层、接口层。整个流程你可以照搬。

2.1 第一步：初始化项目脚手架

我先手动把空壳建出来（这步它也能帮你做，但脚手架我自己更放心）：

npm create vite@latest my-app -- --template vue-ts
cd my-app
npm install
npm install vue-router@4 pinia axios

然后启动 Claude Code，给它第一个任务：

这是一个 Vue3 + TS + Vite 项目，已装好 vue-router、pinia、axios。
请帮我配置：
1. 路径别名 @ 指向 src
2. vue-router 基础结构（history 模式）
3. pinia 基础结构
4. 一个 axios 请求封装，带请求/响应拦截器

它会去读 vite.config.ts、tsconfig.json、package.json，然后逐个文件改好。注意它改完会列出 diff 让你确认，看一眼再同意。

它会生成类似这样的路由：

// src/router/index.ts
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
​
const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/HomeView.vue'),
    meta: { title: '首页' }
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('@/views/AboutView.vue'),
    meta: { title: '关于' }
  }
]
​
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})
​
router.beforeEach((to, from, next) => {
  const title = to.meta.title as string
  if (title) document.title = title
  next()
})
​
export default router

2.2 第二步：生成接口层（API 封装）

接口层是最适合交给 AI 的——结构固定、模板化、又容易写错类型。我让它按约定生成：

请在 src/api 目录下按模块组织接口：
1. src/utils/request.ts 已有 axios 封装，请基于它封装一个 request<T> 泛型方法
2. 每个业务模块一个文件，如 src/api/user.ts
3. 接口入参和返回都要有 TypeScript 类型定义，类型定义放在同文件并 export
4. 统一返回结构假设为 { code, message, data }

它生成的 request.ts 大概长这样：

// src/utils/request.ts
import axios, {
  type AxiosInstance,
  type AxiosRequestConfig,
  type AxiosResponse
} from 'axios'
​
interface ApiResponse<T = unknown> {
  code: number
  message: string
  data: T
}
​
const service: AxiosInstance = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 10000
})
​
// 请求拦截：带 token
service.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token')
    if (token) config.headers.Authorization = `Bearer ${token}`
    return config
  },
  (error) => Promise.reject(error)
)
​
// 响应拦截：统一拆包
service.interceptors.response.use(
  (response: AxiosResponse<ApiResponse>) => {
    const { code, message, data } = response.data
    if (code !== 0) {
      console.error(message)
      return Promise.reject(new Error(message))
    }
    return data as unknown as AxiosResponse
  },
  (error) => {
    console.error('请求失败:', error.message)
    return Promise.reject(error)
  }
)
​
export function request<T = unknown>(config: AxiosRequestConfig): Promise<T> {
  return service.request<unknown, T>(config)
}

对应的业务接口模块：

// src/api/user.ts
import { request } from '@/utils/request'
​
export interface UserInfo {
  id: number
  name: string
  avatar: string
}
​
export interface PageParams {
  page: number
  pageSize: number
}
​
export function getUserInfo(id: number) {
  return request<UserInfo>({
    url: `/user/${id}`,
    method: 'get'
  })
}
​
export function getUserList(params: PageParams) {
  return request<UserInfo[]>({
    url: '/user/list',
    method: 'get',
    params
  })
}

这一层的价值在于：以后每加一个接口，我只要说"在 user.ts 里加一个修改用户信息的接口，入参是 xxx，返回 xxx"，它连类型带方法一起生成，类型还能自动对齐。 这是实打实的提效。

2.3 第三步：生成组件 / 页面

接口层有了，开始写页面。我给它一个明确的需求：

请生成 src/views/UserListView.vue：
- 使用 <script setup lang="ts"> 组合式 API
- 调用 src/api/user.ts 里的 getUserList
- 表格展示用户列表（id、name、avatar），带 loading 态
- 顶部有分页，page/pageSize 用 ref 管理
- 样式用 scoped，简洁即可

它生成的页面：

<!-- src/views/UserListView.vue -->
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getUserList, type UserInfo, type PageParams } from '@/api/user'
​
const users = ref<UserInfo[]>([])
const loading = ref(false)
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
​
async function fetchList() {
  loading.value = true
  try {
    const params: PageParams = { page: page.value, pageSize: pageSize.value }
    users.value = await getUserList(params)
  } finally {
    loading.value = false
  }
}
​
function handlePageChange(p: number) {
  page.value = p
  fetchList()
}
​
onMounted(fetchList)
</script>
​
<template>
  <div class="user-list">
    <table v-loading="loading">
      <thead>
        <tr>
          <th>ID</th>
          <th>头像</th>
          <th>姓名</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="u in users" :key="u.id">
          <td>{{ u.id }}</td>
          <td><img :src="u.avatar" :alt="u.name" class="avatar" /></td>
          <td>{{ u.name }}</td>
        </tr>
      </tbody>
    </table>
​
    <div class="pagination">
      <button :disabled="page <= 1" @click="handlePageChange(page - 1)">上一页</button>
      <span>第 {{ page }} 页</span>
      <button @click="handlePageChange(page + 1)">下一页</button>
    </div>
  </div>
</template>
​
<style scoped>
.user-list table { width: 100%; border-collapse: collapse; }
.user-list th, .user-list td { padding: 8px 12px; border: 1px solid #eee; text-align: left; }
.avatar { width: 32px; height: 32px; border-radius: 50%; }
.pagination { margin-top: 16px; display: flex; gap: 12px; align-items: center; }
</style>

关键点：它自动 import 了 getUserList 和对应的类型，类型在模板里也生效（TS 检查能过）。 这说明它真的读懂了上一步生成的接口层，而不是各写各的。

2.4 第四步：跑起来，让它自己修报错

页面写完，让它跑一下：

请运行 npm run dev，如果有报错就自己修复。

它会执行 npm run dev、读控制台输出、定位报错、改代码、再跑。这一步是 Claude Code 最香的地方——它能看到真实的运行结果并自我修正，不用你把报错复制给它。 我这次遇到个 v-loading 指令报错（没装对应组件库的指令），它自己改成用 v-if 控制 loading 态，一次过。

三、除了搭项目，我平时还这么用

3.1 改 Bug：把"卡两天"变成"卡两分钟"

遇到难搞的 bug，不用自己翻日志了，直接：

访问 /user/list 时控制台报 "Cannot read properties of undefined (reading 'map')"，
请帮我定位并修复。

它会去翻相关组件、追数据流、找到是 users.value 在接口返回前就被渲染了，加个可选链或判空搞定。它调 bug 的思路是"追数据流"，比我自己 console.log 试错高效多了。

3.2 学新技术：让它边讲边写 demo

学一个新东西（比如 Pinia 的 setup store 写法、Vue3 的 watchEffect 细节），我不再去翻文档：

我是 Vue3 + TS 开发者，请用 setup store 写法实现一个用户 store，
包含 state（userInfo）、getter（isLoggedIn）、action（login/logout）。
每段代码配一句解释，最后给一个在组件里使用的示例。

它会生成带注释的代码 + 调用示例。比看文档快，而且直接落在你的项目里能跑。不过提醒：学新技术时它偶尔会用过时或错的 API，关键 API 还是查一眼官方文档。

四、实用技巧合集（重点，建议收藏）

用了一段时间，我总结出这些让 Claude Code 好用 10 倍的技巧：

技巧 1：用 CLAUDE.md 沉淀项目记忆 ⭐⭐⭐⭐⭐

CLAUDE.md 放在项目根目录，Claude Code 每次启动都会读它。这是它"记住"你项目的关键。 把这些写进去：

• 技术栈和版本（Vue3 + TS + Vite + vue-router + pinia + axios）

• 目录结构和约定（接口放 src/api、页面放 src/views、组件放 src/components）

• 代码规范（用 <script setup>、用组合式 API、TS 严格模式、命名规范）

• 常用命令（npm run dev / npm run build / npm run lint）

写一次，以后每次对话它都默认遵守，不用每次重复说。用 /init 能自动生成初版，你再手动补充。

技巧 2：先出方案，再动手 ⭐⭐⭐⭐⭐

复杂需求别让它直接写代码，先让它出方案：

我想加一个用户详情页，支持编辑。
请先给我实现方案（涉及哪些文件、数据流怎么走、路由怎么配），先不要写代码。

确认思路对了，再说"按这个方案开始实现"。避免它闷头写了一堆你还得推翻重来。 也可以直接用 Plan mode（Shift + Tab 切过去）。

技巧 3：触发深度思考 ⭐⭐⭐⭐

遇到复杂逻辑（状态管理、算法、架构设计），在 prompt 里加关键词触发更深的思考：

• think — 基础思考

• think hard / think more — 更深入

• ultrathink — 最大力度

例如：

think hard：当前权限系统有 3 种角色 × 5 类资源，请设计一个前端权限控制方案，要兼顾路由级和按钮级。

它会先展现推理过程（考虑了哪些方案、各自取舍），再给结论。这是我对 Claude Code 印象最深的地方——它真的会"想"，而不是上来就堆代码。

技巧 4：小步快跑，一次一个明确任务 ⭐⭐⭐⭐

别一次甩"帮我做完整个后台管理系统"。拆成：

1. "配置路由和 pinia"

2. "生成 user 模块接口层"

3. "生成用户列表页"

4. "生成用户详情页"

每步验证没问题再下一步。上下文越聚焦，输出质量越高，也越不容易跑偏。

技巧 5：上下文长了就 /compact ⭐⭐⭐⭐

对话太长它会"忘事"（早期约定记不清了）。这时敲：

/compact

它会压缩当前对话历史，保留关键信息，腾出上下文空间。彻底想重开就 /clear。

技巧 6：自定义 slash 命令 ⭐⭐⭐

在项目里建 .claude/commands/ 目录，放 .md 文件就能定义自己的快捷命令。比如建个 gen-api.md：

请在 src/api/$ARGUMENTS.ts 中，根据后端接口约定生成一个接口模块：
- 包含入参、出参的 TS 类型定义
- 基于 src/utils/request.ts 的 request 方法
- 类型定义 export 出去供组件使用

之后在对话里敲 /gen-api order，它就会按这套模板生成 src/api/order.ts。重复劳动彻底模板化。

技巧 7：别盲信，一定要 review ⭐⭐⭐⭐⭐

最重要的一条。它会幻觉：

• 编不存在的 API 或 npm 包

• 用过时的写法（比如 Vue2 的 options API 混进来）

• 依赖版本对不上

它写的代码一律要过一眼，尤其这几类： 第三方 API 调用、依赖版本、安全相关（别让它把 token 硬编码）、复杂业务逻辑。把它当"很能写但需要 review 的实习生"，不是"权威"。

技巧 8：让它写测试 ⭐⭐⭐

请给 src/api/user.ts 里的 getUserList 写单元测试，用 vitest。

它能把接口 mock 掉、断言返回类型和数据。测试一跑，生成的代码到底对不对立刻见分晓。

五、客观说优缺点

优点

• 真·项目级上下文：能读整个仓库，生成的代码能和你现有代码对齐（类型、命名、目录都跟得上）

• 能跑能改能自查：直接执行命令、看报错、自我修正，闭环比网页版完整太多

• 深度思考能力：复杂问题会先推理再给方案，不是无脑堆代码

不足（真实体验）

• 长上下文会忘事：聊太久早期的约定就记不清了，得靠 CLAUDE.md + /compact 兜底

• 偶尔幻觉：会编不存在的 API / 包，必须 review（见技巧 7）

• 复杂业务逻辑仍需人把关：它能写"对"的代码，但"对不对业务"还得你判断

• 网络和成本：要联网、要额度，团队大规模铺开要算下账

• 配置有门槛：CLAUDE.md、slash 命令、MCP 这些进阶玩法需要花点时间学

六、总结

一句话：Claude Code 是目前我用到过最接近"项目级 AI 同事"的工具。 它不是让你"不用写代码了"，而是让你从重复的脚手架、模板代码、调 bug 里解放出来，把精力留给真正的业务设计和架构。如果你是前端，建议今天就拿一个真实小项目试一遍本文第三节的流程——从初始化到接口层到页面，亲手走一遍，你会立刻明白它为什么值得。

上手路径建议： 装好 → /init 生成 CLAUDE.md → Plan mode 出方案 → 小步生成接口层 → review → 跑起来让它自修报错。这条链路跑通，你就入门了。