import{_ as f}from"./index-CXaPsBVx.js";import{r as g,c as x,x as i,z as d,L as c,O as t,Q as b,ac as u,aY as l,P as a,y as v,C as n}from"./vue-vendor-CKToUHZx.js";import"./element-plus-B8Fs_0jW.js";import"./vendor-BDiMbLwQ.js";const p={class:"card p-6"},y={class:"mb-8"},h={class:"flex flex-wrap gap-2 p-2 bg-gray-100 rounded-xl"},C=["onClick"],w={key:0,class:"tutorial-content"},A={class:"mb-10"},T={class:"bg-gradient-to-r from-orange-50 to-yellow-50 rounded-xl p-6 border border-orange-100 mb-6"},P={class:"space-y-4"},N={class:"bg-white rounded-lg p-4 border border-orange-200"},S={class:"bg-gray-900 text-green-400 p-3 rounded font-mono text-sm"},H={class:"text-gray-300"},O={class:"bg-white rounded-lg p-4 border border-orange-200"},I={class:"mt-3 space-y-2"},R={class:"bg-gray-100 p-2 rounded text-sm"},B={class:"font-mono"},U={class:"bg-blue-50 border border-blue-200 rounded-lg p-4 mt-6"},j={class:"mt-3 space-y-2"},E={class:"bg-gray-100 p-2 rounded text-sm font-mono"},L={key:1,class:"tutorial-content"},_={class:"mb-10"},q={class:"bg-gradient-to-r from-orange-50 to-yellow-50 rounded-xl p-6 border border-orange-100 mb-6"},k={class:"space-y-4"},G={class:"bg-white rounded-lg p-4 border border-orange-200"},K={class:"bg-gray-900 text-green-400 p-3 rounded font-mono text-sm"},z={class:"text-gray-300"},D={class:"bg-white rounded-lg p-4 border border-orange-200"},W={class:"bg-gray-900 text-green-400 p-3 rounded font-mono text-sm mb-3"},$={class:"text-gray-300"},M={class:"bg-gray-900 text-green-400 p-3 rounded font-mono text-sm"},V={class:"text-gray-300"},F={key:2,class:"tutorial-content"},Q={class:"mb-10"},Y={class:"bg-gradient-to-r from-orange-50 to-yellow-50 rounded-xl p-6 border border-orange-100 mb-6"},J={class:"space-y-4"},X={class:"bg-white rounded-lg p-4 border border-orange-200"},Z={class:"bg-gray-900 text-green-400 p-3 rounded font-mono text-sm"},ee={class:"text-gray-300"},de={class:"bg-white rounded-lg p-4 border border-orange-200"},te={class:"bg-gray-900 text-green-400 p-3 rounded font-mono text-sm mb-3"},ae={class:"text-gray-300"},se={class:"bg-gray-900 text-green-400 p-3 rounded font-mono text-sm"},le={class:"text-gray-300"},re={__name:"TutorialView",setup(oe){const r=g("windows"),m=[{key:"windows",name:"Windows",icon:"fab fa-windows"},{key:"macos",name:"macOS",icon:"fab fa-apple"},{key:"linux",name:"Linux / WSL2",icon:"fab fa-linux"}];return x(()=>window.location.origin),(s,e)=>(v(),i("div",p,[e[55]||(e[55]=d("div",{class:"mb-8"},[d("h3",{class:"text-2xl font-bold text-gray-900 mb-4 flex items-center"},[d("i",{class:"fas fa-graduation-cap text-blue-600 mr-3"}),t(" Claude Code 使用教程 ")]),d("p",{class:"text-gray-600 text-lg"},"跟着这个教程,你可以轻松在自己的电脑上安装并使用 Claude Code。")],-1)),d("div",y,[d("div",h,[(v(),i(b,null,u(m,o=>d("button",{key:o.key,onClick:ie=>r.value=o.key,class:n(["flex-1 py-3 px-6 text-sm font-semibold rounded-lg transition-all duration-300 flex items-center justify-center gap-2",r.value===o.key?"bg-white text-blue-600 shadow-sm":"text-gray-600 hover:bg-white/50 hover:text-gray-900"])},[d("i",{class:n(o.icon)},null,2),t(" "+a(o.name),1)],10,C)),64))])]),r.value==="windows"?(v(),i("div",w,[e[19]||(e[19]=l('

1 安装 Node.js 环境

Claude Code 需要 Node.js 环境才能运行。

Windows 安装方法

方法一:官网下载(推荐)

  1. 打开浏览器访问 https://nodejs.org/
  2. 点击 "LTS" 版本进行下载(推荐长期支持版本)
  3. 下载完成后双击 .msi 文件
  4. 按照安装向导完成安装,保持默认设置即可

方法二:使用包管理器

如果你安装了 Chocolatey 或 Scoop,可以使用命令行安装:

# 使用 Chocolatey
choco install nodejs
# 或使用 Scoop
scoop install nodejs
Windows 注意事项
  • • 建议使用 PowerShell 而不是 CMD
  • • 如果遇到权限问题,尝试以管理员身份运行
  • • 某些杀毒软件可能会误报,需要添加白名单
验证安装是否成功

安装完成后,打开 PowerShell 或 CMD,输入以下命令:

node --version
npm --version

如果显示版本号,说明安装成功了!

2 安装 Git Bash

Windows 环境下需要使用 Git Bash 安装Claude code。安装完成后,环境变量设置和使用 Claude Code 仍然在普通的 PowerShell 或 CMD 中进行。

下载并安装 Git for Windows
  1. 访问 https://git-scm.com/downloads/win
  2. 点击 "Download for Windows" 下载安装包
  3. 运行下载的 .exe 安装文件
  4. 在安装过程中保持默认设置,直接点击 "Next" 完成安装
安装完成后
  • • 在任意文件夹右键可以看到 "Git Bash Here" 选项
  • • 也可以从开始菜单启动 "Git Bash"
  • • 只需要在 Git Bash 中运行 npm install 命令
  • • 后续的环境变量设置和使用都在 PowerShell/CMD 中
验证 Git Bash 安装

打开 Git Bash,输入以下命令验证:

git --version

如果显示 Git 版本号,说明安装成功!

3 安装 Claude Code

安装 Claude Code

打开 Git Bash(重要:不要使用 PowerShell),运行以下命令:

# 在 Git Bash 中全局安装 Claude Code
npm install -g @anthropic-ai/claude-code

这个命令会从 npm 官方仓库下载并安装最新版本的 Claude Code。

重要提醒
  • • 必须在 Git Bash 中运行,不要在 PowerShell 中运行
  • • 如果遇到权限问题,可以尝试在 Git Bash 中使用 sudo 命令
验证 Claude Code 安装

安装完成后,输入以下命令检查是否安装成功:

claude --version

如果显示版本号,恭喜你!Claude Code 已经成功安装了。

',3)),d("div",A,[e[18]||(e[18]=d("h4",{class:"text-xl font-semibold text-gray-800 mb-4 flex items-center"},[d("span",{class:"w-8 h-8 bg-orange-500 text-white rounded-full flex items-center justify-center text-sm font-bold mr-3"},"4"),t(" 设置环境变量 ")],-1)),d("div",T,[e[12]||(e[12]=d("h5",{class:"text-lg font-semibold text-gray-800 mb-3 flex items-center"},[d("i",{class:"fas fa-cog text-orange-600 mr-2"}),t(" 配置 Claude Code 环境变量 ")],-1)),e[13]||(e[13]=d("p",{class:"text-gray-700 mb-4"},"为了让 Claude Code 连接到你的中转服务,需要设置两个环境变量:",-1)),d("div",P,[d("div",N,[e[1]||(e[1]=d("h6",{class:"font-medium text-gray-800 mb-2"},"方法一:PowerShell 临时设置(推荐)",-1)),e[2]||(e[2]=d("p",{class:"text-gray-600 text-sm mb-3"},"在 PowerShell 中运行以下命令:",-1)),d("div",S,[d("div",H,'$env:ANTHROPIC_BASE_URL = "'+a(s.currentBaseUrl)+'"',1),e[0]||(e[0]=d("div",{class:"text-gray-300"},'$env:ANTHROPIC_AUTH_TOKEN = "你的API密钥"',-1))]),e[3]||(e[3]=d("p",{class:"text-yellow-700 text-xs mt-2"},'💡 记得将 "你的API密钥" 替换为在上方 "API Keys" 标签页中创建的实际密钥。',-1))]),d("div",O,[e[10]||(e[10]=d("h6",{class:"font-medium text-gray-800 mb-2"},"方法二:系统环境变量(永久设置)",-1)),e[11]||(e[11]=d("ol",{class:"text-gray-600 text-sm space-y-1 list-decimal list-inside"},[d("li",null,'右键"此电脑" → "属性" → "高级系统设置"'),d("li",null,'点击"环境变量"按钮'),d("li",null,'在"用户变量"或"系统变量"中点击"新建"'),d("li",null,"添加以下两个变量:")],-1)),d("div",I,[d("div",R,[e[4]||(e[4]=d("strong",null,"变量名:",-1)),e[5]||(e[5]=t(" ANTHROPIC_BASE_URL",-1)),e[6]||(e[6]=d("br",null,null,-1)),e[7]||(e[7]=d("strong",null,"变量值:",-1)),e[8]||(e[8]=t()),d("span",B,a(s.currentBaseUrl),1)]),e[9]||(e[9]=d("div",{class:"bg-gray-100 p-2 rounded text-sm"},[d("strong",null,"变量名:"),t(" ANTHROPIC_AUTH_TOKEN"),d("br"),d("strong",null,"变量值:"),t(),d("span",{class:"font-mono"},"你的API密钥")],-1))])])])]),d("div",U,[e[17]||(e[17]=l('
验证环境变量设置

设置完环境变量后,可以通过以下命令验证是否设置成功:

在 PowerShell 中验证:
echo $env:ANTHROPIC_BASE_URL
echo $env:ANTHROPIC_AUTH_TOKEN
在 CMD 中验证:
echo %ANTHROPIC_BASE_URL%
echo %ANTHROPIC_AUTH_TOKEN%
',3)),d("div",j,[e[15]||(e[15]=d("p",{class:"text-blue-700 text-sm"},[d("strong",null,"预期输出示例:")],-1)),d("div",E,[d("div",null,a(s.currentBaseUrl),1),e[14]||(e[14]=d("div",null,"cr_xxxxxxxxxxxxxxxxxx",-1))]),e[16]||(e[16]=d("p",{class:"text-blue-700 text-xs"}," 💡 如果输出为空或显示变量名本身,说明环境变量设置失败,请重新设置。 ",-1))])])]),e[20]||(e[20]=l('

5 开始使用 Claude Code

现在你可以开始使用 Claude Code 了!

启动 Claude Code
claude
在特定项目中使用
# 进入你的项目目录
cd C:\\path\\to\\your\\project
# 启动 Claude Code
claude

Windows 常见问题解决

安装时提示 "permission denied" 错误

这通常是权限问题,尝试以下解决方法:

  • 以管理员身份运行 PowerShell
  • 或者配置 npm 使用用户目录:npm config set prefix %APPDATA%\\npm
PowerShell 执行策略错误

如果遇到执行策略限制,运行:

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
环境变量设置后不生效

设置永久环境变量后需要:

  • 重新启动 PowerShell 或 CMD
  • 或者注销并重新登录 Windows
  • 验证设置:echo $env:ANTHROPIC_BASE_URL
',2))])):r.value==="macos"?(v(),i("div",L,[e[36]||(e[36]=l('

1 安装 Node.js 环境

Claude Code 需要 Node.js 环境才能运行。

macOS 安装方法

方法一:使用 Homebrew(推荐)

如果你已经安装了 Homebrew,使用它安装 Node.js 会更方便:

# 更新 Homebrew
brew update
# 安装 Node.js
brew install node

方法二:官网下载

  1. 访问 https://nodejs.org/
  2. 下载适合 macOS 的 LTS 版本
  3. 打开下载的 .pkg 文件
  4. 按照安装程序指引完成安装
macOS 注意事项
  • • 如果遇到权限问题,可能需要使用 sudo
  • • 首次运行可能需要在系统偏好设置中允许
  • • 建议使用 Terminal 或 iTerm2
验证安装是否成功

安装完成后,打开 Terminal,输入以下命令:

node --version
npm --version

如果显示版本号,说明安装成功了!

2 安装 Claude Code

安装 Claude Code

打开 Terminal,运行以下命令:

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

如果遇到权限问题,可以使用 sudo:

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

安装完成后,输入以下命令检查是否安装成功:

claude --version

如果显示版本号,恭喜你!Claude Code 已经成功安装了。

',2)),d("div",_,[e[35]||(e[35]=d("h4",{class:"text-xl font-semibold text-gray-800 mb-4 flex items-center"},[d("span",{class:"w-8 h-8 bg-orange-500 text-white rounded-full flex items-center justify-center text-sm font-bold mr-3"},"3"),t(" 设置环境变量 ")],-1)),d("div",q,[e[33]||(e[33]=d("h5",{class:"text-lg font-semibold text-gray-800 mb-3 flex items-center"},[d("i",{class:"fas fa-cog text-orange-600 mr-2"}),t(" 配置 Claude Code 环境变量 ")],-1)),e[34]||(e[34]=d("p",{class:"text-gray-700 mb-4"},"为了让 Claude Code 连接到你的中转服务,需要设置两个环境变量:",-1)),d("div",k,[d("div",G,[e[22]||(e[22]=d("h6",{class:"font-medium text-gray-800 mb-2"},"方法一:临时设置(当前会话)",-1)),e[23]||(e[23]=d("p",{class:"text-gray-600 text-sm mb-3"},"在 Terminal 中运行以下命令:",-1)),d("div",K,[d("div",z,'export ANTHROPIC_BASE_URL="'+a(s.currentBaseUrl)+'"',1),e[21]||(e[21]=d("div",{class:"text-gray-300"},'export ANTHROPIC_AUTH_TOKEN="你的API密钥"',-1))]),e[24]||(e[24]=d("p",{class:"text-yellow-700 text-xs mt-2"},'💡 记得将 "你的API密钥" 替换为在上方 "API Keys" 标签页中创建的实际密钥。',-1))]),d("div",D,[e[31]||(e[31]=d("h6",{class:"font-medium text-gray-800 mb-2"},"方法二:永久设置",-1)),e[32]||(e[32]=d("p",{class:"text-gray-600 text-sm mb-3"},"编辑你的 shell 配置文件(根据你使用的 shell):",-1)),d("div",W,[e[25]||(e[25]=d("div",{class:"mb-2"},"# 对于 zsh (默认)",-1)),d("div",$,`echo 'export ANTHROPIC_BASE_URL="`+a(s.currentBaseUrl)+`"' >> ~/.zshrc`,1),e[26]||(e[26]=d("div",{class:"text-gray-300"},`echo 'export ANTHROPIC_AUTH_TOKEN="你的API密钥"' >> ~/.zshrc`,-1)),e[27]||(e[27]=d("div",{class:"text-gray-300"},"source ~/.zshrc",-1))]),d("div",M,[e[28]||(e[28]=d("div",{class:"mb-2"},"# 对于 bash",-1)),d("div",V,`echo 'export ANTHROPIC_BASE_URL="`+a(s.currentBaseUrl)+`"' >> ~/.bash_profile`,1),e[29]||(e[29]=d("div",{class:"text-gray-300"},`echo 'export ANTHROPIC_AUTH_TOKEN="你的API密钥"' >> ~/.bash_profile`,-1)),e[30]||(e[30]=d("div",{class:"text-gray-300"},"source ~/.bash_profile",-1))])])])])]),e[37]||(e[37]=l('

4 开始使用 Claude Code

现在你可以开始使用 Claude Code 了!

启动 Claude Code
claude
在特定项目中使用
# 进入你的项目目录
cd /path/to/your/project
# 启动 Claude Code
claude

macOS 常见问题解决

安装时提示权限错误

尝试以下解决方法:

  • 使用 sudo 安装:sudo npm install -g @anthropic-ai/claude-code
  • 或者配置 npm 使用用户目录:npm config set prefix ~/.npm-global
macOS 安全设置阻止运行

如果系统阻止运行 Claude Code:

  • 打开"系统偏好设置" → "安全性与隐私"
  • 点击"仍要打开"或"允许"
  • 或者在 Terminal 中运行:sudo spctl --master-disable
环境变量不生效

检查以下几点:

  • 确认修改了正确的配置文件(.zshrc 或 .bash_profile)
  • 重新启动 Terminal
  • 验证设置:echo $ANTHROPIC_BASE_URL
',2))])):r.value==="linux"?(v(),i("div",F,[e[53]||(e[53]=l('

1 安装 Node.js 环境

Claude Code 需要 Node.js 环境才能运行。

Linux 安装方法

方法一:使用官方仓库(推荐)

# 添加 NodeSource 仓库
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
# 安装 Node.js
sudo apt-get install -y nodejs

方法二:使用系统包管理器

虽然版本可能不是最新的,但对于基本使用已经足够:

# Ubuntu/Debian
sudo apt update
sudo apt install nodejs npm
# CentOS/RHEL/Fedora
sudo dnf install nodejs npm
Linux 注意事项
  • • 某些发行版可能需要安装额外的依赖
  • • 如果遇到权限问题,使用 sudo
  • • 确保你的用户在 npm 的全局目录有写权限
验证安装是否成功

安装完成后,打开终端,输入以下命令:

node --version
npm --version

如果显示版本号,说明安装成功了!

2 安装 Claude Code

安装 Claude Code

打开终端,运行以下命令:

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

如果遇到权限问题,可以使用 sudo:

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

安装完成后,输入以下命令检查是否安装成功:

claude --version

如果显示版本号,恭喜你!Claude Code 已经成功安装了。

',2)),d("div",Q,[e[52]||(e[52]=d("h4",{class:"text-xl font-semibold text-gray-800 mb-4 flex items-center"},[d("span",{class:"w-8 h-8 bg-orange-500 text-white rounded-full flex items-center justify-center text-sm font-bold mr-3"},"3"),t(" 设置环境变量 ")],-1)),d("div",Y,[e[50]||(e[50]=d("h5",{class:"text-lg font-semibold text-gray-800 mb-3 flex items-center"},[d("i",{class:"fas fa-cog text-orange-600 mr-2"}),t(" 配置 Claude Code 环境变量 ")],-1)),e[51]||(e[51]=d("p",{class:"text-gray-700 mb-4"},"为了让 Claude Code 连接到你的中转服务,需要设置两个环境变量:",-1)),d("div",J,[d("div",X,[e[39]||(e[39]=d("h6",{class:"font-medium text-gray-800 mb-2"},"方法一:临时设置(当前会话)",-1)),e[40]||(e[40]=d("p",{class:"text-gray-600 text-sm mb-3"},"在终端中运行以下命令:",-1)),d("div",Z,[d("div",ee,'export ANTHROPIC_BASE_URL="'+a(s.currentBaseUrl)+'"',1),e[38]||(e[38]=d("div",{class:"text-gray-300"},'export ANTHROPIC_AUTH_TOKEN="你的API密钥"',-1))]),e[41]||(e[41]=d("p",{class:"text-yellow-700 text-xs mt-2"},'💡 记得将 "你的API密钥" 替换为在上方 "API Keys" 标签页中创建的实际密钥。',-1))]),d("div",de,[e[48]||(e[48]=d("h6",{class:"font-medium text-gray-800 mb-2"},"方法二:永久设置",-1)),e[49]||(e[49]=d("p",{class:"text-gray-600 text-sm mb-3"},"编辑你的 shell 配置文件:",-1)),d("div",te,[e[42]||(e[42]=d("div",{class:"mb-2"},"# 对于 bash (默认)",-1)),d("div",ae,`echo 'export ANTHROPIC_BASE_URL="`+a(s.currentBaseUrl)+`"' >> ~/.bashrc`,1),e[43]||(e[43]=d("div",{class:"text-gray-300"},`echo 'export ANTHROPIC_AUTH_TOKEN="你的API密钥"' >> ~/.bashrc`,-1)),e[44]||(e[44]=d("div",{class:"text-gray-300"},"source ~/.bashrc",-1))]),d("div",se,[e[45]||(e[45]=d("div",{class:"mb-2"},"# 对于 zsh",-1)),d("div",le,`echo 'export ANTHROPIC_BASE_URL="`+a(s.currentBaseUrl)+`"' >> ~/.zshrc`,1),e[46]||(e[46]=d("div",{class:"text-gray-300"},`echo 'export ANTHROPIC_AUTH_TOKEN="你的API密钥"' >> ~/.zshrc`,-1)),e[47]||(e[47]=d("div",{class:"text-gray-300"},"source ~/.zshrc",-1))])])])])]),e[54]||(e[54]=l('

4 开始使用 Claude Code

现在你可以开始使用 Claude Code 了!

启动 Claude Code
claude
在特定项目中使用
# 进入你的项目目录
cd /path/to/your/project
# 启动 Claude Code
claude

Linux 常见问题解决

安装时提示权限错误

尝试以下解决方法:

  • 使用 sudo 安装:sudo npm install -g @anthropic-ai/claude-code
  • 或者配置 npm 使用用户目录:npm config set prefix ~/.npm-global
  • 然后添加到 PATH:export PATH=~/.npm-global/bin:$PATH
缺少依赖库

某些 Linux 发行版需要安装额外依赖:

# Ubuntu/Debian
sudo apt install build-essential
# CentOS/RHEL
sudo dnf groupinstall "Development Tools"
环境变量不生效

检查以下几点:

  • 确认修改了正确的配置文件(.bashrc 或 .zshrc)
  • 重新启动终端或运行 source ~/.bashrc
  • 验证设置:echo $ANTHROPIC_BASE_URL
',2))])):c("",!0),e[56]||(e[56]=d("div",{class:"bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-xl p-6 text-center"},[d("h5",{class:"text-xl font-semibold mb-2"},"🎉 恭喜你!"),d("p",{class:"text-blue-100 mb-4"},"你已经成功安装并配置了 Claude Code,现在可以开始享受 AI 编程助手带来的便利了。"),d("p",{class:"text-sm text-blue-200"},"如果在使用过程中遇到任何问题,可以查看官方文档或社区讨论获取帮助。")],-1))]))}},ge=f(re,[["__scopeId","data-v-58e5d8f5"]]);export{ge as default};