跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScriptNode.jsAI大前端

Claude Code 安装与配置指南:优化 AI 编程体验

Claude Code 的安装步骤及配置方法。首先通过 npm 全局安装 claude-code 和 claude-code-router,随后在 settings.json 中配置 API Token 及模型参数。支持使用 Router 灵活切换不同模型提供商(如 GLM、Gemini 等),并可通过可视化 UI 管理路由策略。此外,还包含内置提示词 CLAUDE.md 的配置示例,旨在帮助用户优化 AI 编程工作流。

苹果系统发布于 2026/4/6更新于 2026/5/2029 浏览
Claude Code 安装与配置指南:优化 AI 编程体验

安装 Node.js

前往 Node.js 官网下载安装。

安装 Claude Code

打开 CMD,运行:

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

安装完成后验证:

claude --version

安装成功会输出版本号,如遇报错请查阅官方文档或社区资源。

配置 settings.json

编辑配置文件:

C:\Users\<username>\.claude\settings.json

写入以下内容:

{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "sk-xxx",
    "ANTHROPIC_BASE_URL": "url 地址",
    "API_TIMEOUT_MS": "3000000",
    "CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC": "1",
    "ANTHROPIC_MODEL": "claude-sonnet-4-5-20250929"
  },
  "alwaysThinkingEnabled": true
}

注意:请将文件路径中的 <username> 替换为 Windows 实际用户名,并将 url 地址、API Key 和模型设置为实际使用的服务(如 GLM、豆包等)。

Claude Code Router

如需灵活切换多个渠道模型,推荐安装 Claude Code Router:

npm install - /claude-code-router
g
@musistudio

默认路径:

C:\Users\<username>\.claude-code-router

参考配置如下(以国内模型为例):

{
  "LOG": true,
  "LOG_LEVEL": "debug",
  "CLAUDE_PATH": "",
  "HOST": "127.0.0.1",
  "PORT": 3456,
  "APIKEY": "",
  "API_TIMEOUT_MS": "600000",
  "PROXY_URL": "",
  "transformers": [],
  "Providers": [
    {
      "name": "new-api",
      "api_base_url": "http://192.168.77.235:3011/v1/chat/completions",
      "api_key": "sk-xx",
      "models": ["MiniMax-M2.1", "ZhipuAI/GLM-4.7", "ZhipuAI/GLM-4.6", "gemini-2.5-flash", "gemini-2.5-pro"]
    }
  ],
  "StatusLine": { "enabled": false, "currentStyle": "default", "default": { "modules": [] }, "powerline": { "modules": [] } },
  "Router": {
    "default": "new-api,MiniMax-M2.1",
    "background": "new-api,ZhipuAI/GLM-4.6",
    "think": "new-api,ZhipuAI/GLM-4.7",
    "longContext": "new-api,ZhipuAI/GLM-4.7",
    "longContextThreshold": 60000,
    "webSearch": "new-api,gemini-2.5-flash",
    "image": "new-api,gemini-2.5-flash"
  },
  "CUSTOM_ROUTER_PATH": ""
}

也可通过可视化 UI 进行配置:

ccr ui

效果示意:

配置界面

配置后需重启运行。在命令行执行:

ccr restart ccr code

一般在项目根目录下执行 ccr code 命令即可启动对话交流。

配置界面

模型选择可在路由中配置,记得保存并重启。重启后 ccr code 运行的模型会自动更新。

配置界面

内置提示词配置

使用 cc 或 ccr 均可配置内置提示词,在电脑默认路径下找到 CLAUDE.md:

C:\Users\<username>\.claude
C:\Users\<username>\.claude-code-router

内容示例:

## Development Partnership I'll help you build frontend code and prototypes. I'll handle implementation details while you guide the overall vision and requirements. ## Core Workflow: Research → Plan → Implement → Validate - **Research**: Understand existing patterns and frontend architecture - **Plan**: Propose frontend approach and get your approval - **Implement**: Build with proper component structure and error handling - **Validate**: Run formatters, linters, and test in browser compatibility ## Frontend Code Organization - Keep components small and focused - Use clear naming conventions for files and functions - Follow component composition patterns - Group related UI elements logically ## Frontend Architecture Principles - Prefer explicit over implicit: - Clear component names over clever abstractions - Obvious data flow over hidden state management - Direct props passing over deep context when possible - Delete old code completely - no need for deprecation in prototypes - Optimize for readability and maintainability ## JavaScript/TypeScript Development Standards - Use TypeScript types instead of `any` when possible - Early returns to reduce nesting - Proper error handling in user interactions and API calls - Consistent component structure - Clear comments for complex UI logic ## UI/UX Considerations - Focus on responsive design principles - Consider accessibility in component design - Implement consistent styling patterns - Optimize for performance on common devices ## Problem Solving When stuck: Stop and look for simpler solutions When uncertain: "Let me think about different UI approaches" When choosing: "I see approach A (simpler) vs B (more flexible). Which do you prefer?" ## Testing Strategy for Frontend - Test critical user flows - Ensure browser compatibility - Validate responsive behavior - Check performance on key interactions ## Progress Tracking - Use TodoWrite comments for tracking next steps - Maintain clear documentation of component usage 

在使用的时候,cc 和 ccr 是独立的。可以在一个终端使用 cc,另一个终端使用 ccr。到这一步基本上就能非常灵活地使用 Claude Code 了。至于后面的 CMP、Skills 都是进阶功能,后续再学习。

目录

  1. 安装 Node.js
  2. 安装 Claude Code
  3. 配置 settings.json
  4. Claude Code Router
  5. 内置提示词配置
  6. Development Partnership I'll help you build frontend code and prototypes. I'll handle implementation details while you guide the overall vision and requirements. ## Core Workflow: Research → Plan → Implement → Validate - Research: Understand existing patterns and frontend architecture - Plan: Propose frontend approach and get your approval - Implement: Build with proper component structure and error handling - Validate: Run formatters, linters, and test in browser compatibility ## Frontend Code Organization - Keep components small and focused - Use clear naming conventions for files and functions - Follow component composition patterns - Group related UI elements logically ## Frontend Architecture Principles - Prefer explicit over implicit: - Clear component names over clever abstractions - Obvious data flow over hidden state management - Direct props passing over deep context when possible - Delete old code completely - no need for deprecation in prototypes - Optimize for readability and maintainability ## JavaScript/TypeScript Development Standards - Use TypeScript types instead of any when possible - Early returns to reduce nesting - Proper error handling in user interactions and API calls - Consistent component structure - Clear comments for complex UI logic ## UI/UX Considerations - Focus on responsive design principles - Consider accessibility in component design - Implement consistent styling patterns - Optimize for performance on common devices ## Problem Solving When stuck: Stop and look for simpler solutions When uncertain: "Let me think about different UI approaches" When choosing: "I see approach A (simpler) vs B (more flexible). Which do you prefer?" ## Testing Strategy for Frontend - Test critical user flows - Ensure browser compatibility - Validate responsive behavior - Check performance on key interactions ## Progress Tracking - Use TodoWrite comments for tracking next steps - Maintain clear documentation of component usage
  • 💰 8折买阿里云服务器限时8折了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

微信扫一扫,关注极客日志

微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

更多推荐文章

查看全部
  • DeepSeek-R1 开源大模型推理优化实战:电商与金融场景落地方案
  • LLaMA-2 与 Mixtral 提示词调优实战指南
  • C++ 哈希扩展:位图与布隆过滤器详解及实现
  • 无线联邦学习:隐私保护下的 AI 协同训练
  • 分布式文件系统 HDFS 相关概念详解
  • RAG 技术详解:检索增强生成原理与实践
  • DSPy:大模型应用编程框架入门与实践
  • Git 最佳实践指南
  • Envoy 架构与配置详解
  • Vue3 前端配置指南:VSCode settings.json 与 Prettier
  • Whisper 语音识别模型定制化训练与部署指南
  • 从猎豹到机器人:脊柱仿生学如何重塑四足机器人的运动极限
  • PyWebView 轻量级跨平台桌面应用开发简介
  • NLP 自然语言处理 TextRank 算法详解:文本摘要与关键词提取
  • HID Remapper 实现手柄到鼠标的精准转换
  • 前端水印技术与反爬策略实现方案
  • B 站生态观察:从二次元社区到 AI 创新孵化器
  • 《自然语言处理:大模型理论与实践》:大模型核心技术与实战指南
  • Counterfeit-V3.0 AI 绘画模型技术与应用指南
  • Android 开发环境搭建教程

相关免费在线工具

  • RSA密钥对生成器

    生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online

  • Mermaid 预览与可视化编辑

    基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online

  • 随机西班牙地址生成器

    随机生成西班牙地址(支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选),支持数量快捷选择、显示全部与下载。 在线工具,随机西班牙地址生成器在线工具,online

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online