1> ## Documentation Index
2> Fetch the complete documentation index at: https://code.claude.com/docs/llms.txt
3> Use this file to discover all available pages before exploring further.
4
5# 快速开始
6
7> 欢迎使用 Claude Code!
8
9export const InstallConfigurator = ({defaultSurface = 'terminal'}) => {
10 const TERM = {
11 mac: {
12 label: 'macOS / Linux',
13 cmd: 'curl -fsSL https://claude.ai/install.sh | bash'
14 },
15 win: {
16 label: 'Windows'
17 },
18 brew: {
19 label: 'Homebrew',
20 cmd: 'brew install --cask claude-code'
21 },
22 winget: {
23 label: 'WinGet',
24 cmd: 'winget install Anthropic.ClaudeCode'
25 }
26 };
27 const WIN_VARIANTS = {
28 ps: 'irm https://claude.ai/install.ps1 | iex',
29 cmd: 'curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd'
30 };
31 const TABS = [{
32 key: 'terminal',
33 label: 'Terminal'
34 }, {
35 key: 'desktop',
36 label: 'Desktop'
37 }, {
38 key: 'vscode',
39 label: 'VS Code'
40 }, {
41 key: 'jetbrains',
42 label: 'JetBrains'
43 }];
44 const ALT_TARGETS = {
45 desktop: {
46 name: 'Desktop',
47 tagline: 'The full agent in a native app for macOS and Windows.',
48 installLabel: 'Download the app',
49 installHref: 'https://claude.com/download?utm_source=claude_code&utm_medium=docs&utm_content=configurator_desktop_download',
50 guideHref: '/en/desktop-quickstart'
51 },
52 vscode: {
53 name: 'VS Code',
54 tagline: 'Review diffs, manage context, and chat without leaving your editor.',
55 installLabel: 'Install from Marketplace',
56 installHref: 'https://marketplace.visualstudio.com/items?itemName=anthropic.claude-code',
57 altCmd: 'code --install-extension anthropic.claude-code',
58 guideHref: '/en/vs-code'
59 },
60 jetbrains: {
61 name: 'JetBrains',
62 tagline: 'Native plugin for IntelliJ, PyCharm, WebStorm, and other JetBrains IDEs.',
63 installLabel: 'Install from Marketplace',
64 installHref: 'https://plugins.jetbrains.com/plugin/27310-claude-code-beta-',
65 guideHref: '/en/jetbrains'
66 }
67 };
68 const PROVIDERS = [{
69 key: 'anthropic',
70 label: 'Anthropic'
71 }, {
72 key: 'bedrock',
73 label: 'Amazon Bedrock'
74 }, {
75 key: 'foundry',
76 label: 'Microsoft Foundry'
77 }, {
78 key: 'vertex',
79 label: 'Google Vertex AI'
80 }];
81 const PROVIDER_NOTICE = {
82 bedrock: <>
83 <strong>Configure your AWS account first.</strong> Running on Bedrock
84 requires model access enabled in the AWS console and IAM credentials.{' '}
85 <a href="/en/amazon-bedrock">Bedrock setup guide →</a>
86 </>,
87 vertex: <>
88 <strong>Configure your GCP project first.</strong> Running on Vertex AI
89 requires the Vertex API enabled and a service account with the right
90 permissions.{' '}
91 <a href="/en/google-vertex-ai">Vertex setup guide →</a>
92 </>,
93 foundry: <>
94 <strong>Configure your Azure resources first.</strong> Running on
95 Microsoft Foundry requires an Azure subscription with a Foundry resource
96 and model deployments provisioned.{' '}
97 <a href="/en/microsoft-foundry">Foundry setup guide →</a>
98 </>
99 };
100 const iconCheck = (size = 14) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
101 <polyline points="20 6 9 17 4 12" />
102 </svg>;
103 const iconCopy = (size = 14) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
104 <rect x="9" y="9" width="13" height="13" rx="2" />
105 <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
106 </svg>;
107 const iconArrowRight = (size = 13) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
108 <line x1="5" y1="12" x2="19" y2="12" />
109 <polyline points="12 5 19 12 12 19" />
110 </svg>;
111 const iconArrowUpRight = (size = 14) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
112 <line x1="7" y1="17" x2="17" y2="7" />
113 <polyline points="7 7 17 7 17 17" />
114 </svg>;
115 const iconInfo = (size = 16) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
116 <circle cx="12" cy="12" r="10" />
117 <line x1="12" y1="16" x2="12" y2="12" />
118 <line x1="12" y1="8" x2="12.01" y2="8" />
119 </svg>;
120 const [target, setTarget] = useState(defaultSurface);
121 const [team, setTeam] = useState(false);
122 const [provider, setProvider] = useState('anthropic');
123 const [pkg, setPkg] = useState(() => (/Win/).test(navigator.userAgent) ? 'win' : 'mac');
124 const [winCmd, setWinCmd] = useState(false);
125 const [copied, setCopied] = useState(null);
126 const copyTimer = useRef(null);
127 const handleCopy = async (text, key) => {
128 try {
129 await navigator.clipboard.writeText(text);
130 } catch {
131 const ta = document.createElement('textarea');
132 ta.value = text;
133 document.body.appendChild(ta);
134 ta.select();
135 document.execCommand('copy');
136 document.body.removeChild(ta);
137 }
138 clearTimeout(copyTimer.current);
139 setCopied(key);
140 copyTimer.current = setTimeout(() => setCopied(null), 1800);
141 };
142 const cardBodyCmd = (cmd, prompt) => {
143 const on = copied === 'term';
144 return <div className="cc-ic-card-body">
145 <span className="cc-ic-prompt">{prompt || '$'}</span>
146 <div className="cc-ic-cmd">{cmd}</div>
147 <button type="button" className={'cc-ic-copy' + (on ? ' cc-ic-copied' : '')} onClick={() => handleCopy(cmd, 'term')}>
148 {on ? iconCheck(13) : iconCopy(13)}
149 <span>{on ? 'Copied' : 'Copy'}</span>
150 </button>
151 </div>;
152 };
153 const isWinInstaller = pkg === 'win';
154 const isWinPrompt = pkg === 'win' || pkg === 'winget';
155 const terminalCmd = isWinInstaller ? WIN_VARIANTS[winCmd ? 'cmd' : 'ps'] : TERM[pkg].cmd;
156 const alt = ALT_TARGETS[target];
157 const showNotice = team && provider !== 'anthropic';
158 const STYLES = `
159.cc-ic {
160 --ic-slate: #141413;
161 --ic-clay: #d97757;
162 --ic-clay-deep: #c6613f;
163 --ic-gray-000: #ffffff;
164 --ic-gray-150: #f0eee6;
165 --ic-gray-550: #73726c;
166 --ic-gray-700: #3d3d3a;
167 --ic-border-subtle: rgba(31, 30, 29, 0.08);
168 --ic-border-default: rgba(31, 30, 29, 0.15);
169 --ic-border-strong: rgba(31, 30, 29, 0.3);
170 --ic-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Courier New', monospace;
171 font-family: 'Anthropic Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
172 font-size: 14px; line-height: 1.5; color: var(--ic-slate);
173 margin: 8px 0 32px;
174}
175.dark .cc-ic {
176 --ic-slate: #f0eee6;
177 --ic-gray-000: #262624;
178 --ic-gray-150: #1f1e1d;
179 --ic-gray-550: #91908a;
180 --ic-gray-700: #bfbdb4;
181 --ic-border-subtle: rgba(240, 238, 230, 0.08);
182 --ic-border-default: rgba(240, 238, 230, 0.14);
183 --ic-border-strong: rgba(240, 238, 230, 0.28);
184}
185.dark .cc-ic-check { background: transparent; }
186.dark .cc-ic-card { border: 0.5px solid var(--ic-border-subtle); }
187.dark .cc-ic-p-pill.cc-ic-active { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
188.cc-ic *, .cc-ic *::before, .cc-ic *::after { box-sizing: border-box; }
189.cc-ic a { text-decoration: none; }
190.cc-ic a:not([class]) { color: inherit; }
191.cc-ic button { font-family: inherit; cursor: pointer; }
192
193.cc-ic-tab-strip {
194 display: inline-flex; gap: 2px;
195 padding: 4px; background: var(--ic-gray-150);
196 border-radius: 10px; overflow-x: auto;
197 max-width: 100%;
198}
199.cc-ic-tab {
200 appearance: none; background: none; border: none;
201 padding: 10px 18px; font-size: 15px; font-weight: 430;
202 color: var(--ic-gray-550); border-radius: 7px;
203 white-space: nowrap;
204 transition: color 0.12s, background-color 0.12s;
205}
206.cc-ic-tab:hover { color: var(--ic-gray-700); }
207.cc-ic-tab.cc-ic-active {
208 color: var(--ic-slate); font-weight: 500;
209 background: var(--ic-gray-000);
210 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
211}
212.dark .cc-ic-tab.cc-ic-active { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
213
214.cc-ic-team-wrap { padding: 16px 0 20px; }
215.cc-ic-team-toggle {
216 display: flex; align-items: center; gap: 12px; font-family: inherit;
217 padding: 12px 16px; font-size: 14px; font-weight: 430;
218 color: var(--ic-gray-700); cursor: pointer; user-select: none;
219 width: fit-content; background: var(--ic-gray-150);
220 border: 0.5px solid var(--ic-border-subtle); border-radius: 8px;
221 transition: border-color 0.15s;
222}
223.cc-ic-team-toggle:hover { border-color: var(--ic-border-default); }
224.cc-ic-team-toggle.cc-ic-checked {
225 background: rgba(217, 119, 87, 0.08);
226 border-color: rgba(217, 119, 87, 0.25);
227}
228.cc-ic-check {
229 width: 16px; height: 16px;
230 border: 1px solid var(--ic-border-strong); border-radius: 4px;
231 background: var(--ic-gray-000);
232 display: flex; align-items: center; justify-content: center;
233 flex-shrink: 0;
234}
235.cc-ic-check svg { color: #fff; display: none; }
236.cc-ic-team-toggle.cc-ic-checked .cc-ic-check { background: var(--ic-clay-deep); border-color: var(--ic-clay-deep); }
237.cc-ic-team-toggle.cc-ic-checked .cc-ic-check svg { display: block; }
238
239.cc-ic-team-reveal { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
240.cc-ic-sales {
241 display: flex; align-items: center; justify-content: space-between;
242 gap: 16px; padding: 14px 16px;
243 background: var(--ic-gray-000); border: 0.5px solid var(--ic-border-default);
244 border-radius: 8px; flex-wrap: wrap;
245}
246.cc-ic-sales-text { font-size: 13px; color: var(--ic-gray-700); line-height: 1.5; flex: 1; min-width: 200px; }
247.cc-ic-sales-text strong { font-weight: 550; color: var(--ic-slate); }
248.cc-ic-sales-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
249.cc-ic-btn-clay {
250 display: inline-flex; align-items: center; gap: 8px;
251 background: var(--ic-clay-deep); color: #fff; border: none;
252 border-radius: 8px; padding: 8px 14px;
253 font-size: 13px; font-weight: 500;
254 transition: background-color 0.15s; white-space: nowrap;
255}
256.cc-ic-btn-clay:hover { background: var(--ic-clay); }
257.cc-ic-btn-ghost {
258 display: inline-flex; align-items: center; gap: 8px;
259 background: transparent; color: var(--ic-gray-700);
260 border: 0.5px solid var(--ic-border-default);
261 border-radius: 8px; padding: 8px 14px;
262 font-size: 13px; font-weight: 500;
263}
264.cc-ic-btn-ghost:hover { background: rgba(0, 0, 0, 0.04); }
265
266.cc-ic-provider-bar {
267 display: flex; align-items: center; gap: 12px;
268 padding: 14px 16px; background: var(--ic-gray-150);
269 border-radius: 8px; font-size: 13px; flex-wrap: wrap;
270}
271.cc-ic-provider-bar .cc-ic-label { color: var(--ic-gray-550); flex-shrink: 0; }
272.cc-ic-provider-pills { display: flex; gap: 4px; flex-wrap: wrap; }
273.cc-ic-p-pill {
274 appearance: none; border: none; background: transparent;
275 padding: 6px 12px; border-radius: 6px;
276 font-size: 13px; font-weight: 430; color: var(--ic-gray-700);
277 white-space: nowrap;
278}
279.cc-ic-p-pill:hover { background: rgba(0, 0, 0, 0.04); }
280.cc-ic-p-pill.cc-ic-active {
281 background: var(--ic-gray-000); color: var(--ic-slate);
282 font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
283}
284.cc-ic-provider-notice {
285 display: flex; padding: 16px 18px;
286 background: var(--ic-gray-000); border: 0.5px solid var(--ic-border-default);
287 border-radius: 8px; gap: 14px; align-items: flex-start;
288}
289.cc-ic-provider-notice > svg { color: var(--ic-gray-550); margin-top: 2px; flex-shrink: 0; }
290.cc-ic-provider-notice-body { font-size: 14px; line-height: 1.55; color: var(--ic-gray-700); }
291.cc-ic-provider-notice-body strong { font-weight: 550; color: var(--ic-slate); }
292.cc-ic-provider-notice-body a { color: var(--ic-clay-deep); font-weight: 500; }
293.cc-ic-provider-notice-body a:hover { text-decoration: underline; }
294
295.cc-ic-card { background: #141413; border-radius: 12px; overflow: hidden; }
296.cc-ic-subtabs {
297 display: flex; align-items: center;
298 background: #1a1918;
299 border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
300 padding: 0 8px; overflow-x: auto;
301}
302.cc-ic-subtab {
303 appearance: none; background: none; border: none;
304 padding: 12px 16px; font-size: 12px;
305 color: rgba(255, 255, 255, 0.5);
306 position: relative; white-space: nowrap;
307}
308.cc-ic-subtab:hover { color: rgba(255, 255, 255, 0.75); }
309.cc-ic-subtab.cc-ic-active { color: #fff; }
310.cc-ic-subtab.cc-ic-active::after {
311 content: ''; position: absolute;
312 left: 12px; right: 12px; bottom: -0.5px;
313 height: 2px; background: var(--ic-clay);
314}
315.cc-ic-shell-switch {
316 display: inline-flex; gap: 2px;
317 margin: 14px 26px 0; padding: 3px;
318 background: rgba(255, 255, 255, 0.06);
319 border: 0.5px solid rgba(255, 255, 255, 0.08);
320 border-radius: 8px;
321 font-family: inherit;
322}
323.cc-ic-shell-option {
324 font: inherit; font-size: 12px; font-weight: 500;
325 padding: 5px 12px; border-radius: 6px;
326 background: transparent; border: none;
327 color: rgba(255, 255, 255, 0.55);
328 cursor: pointer; user-select: none; white-space: nowrap;
329 transition: color 120ms ease, background-color 120ms ease;
330}
331.cc-ic-shell-option:hover { color: rgba(255, 255, 255, 0.85); }
332.cc-ic-shell-option.cc-ic-active {
333 background: rgba(255, 255, 255, 0.12);
334 color: #fff;
335 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
336}
337
338.cc-ic-card-body { padding: 24px 26px; display: flex; align-items: flex-start; gap: 14px; }
339.cc-ic-prompt {
340 color: var(--ic-clay); font-family: var(--ic-font-mono);
341 font-size: 17px; user-select: none; padding-top: 2px;
342}
343.cc-ic-cmd {
344 flex: 1; font-family: var(--ic-font-mono);
345 font-size: 17px; color: #f0eee6;
346 line-height: 1.55; white-space: pre-wrap; word-break: break-word;
347}
348.cc-ic-copy {
349 display: inline-flex; align-items: center; gap: 6px;
350 background: rgba(255, 255, 255, 0.08);
351 border: 0.5px solid rgba(255, 255, 255, 0.12);
352 color: rgba(255, 255, 255, 0.85);
353 padding: 7px 13px; border-radius: 8px;
354 font-size: 13px; font-weight: 500; flex-shrink: 0;
355}
356.cc-ic-copy:hover { background: rgba(255, 255, 255, 0.14); }
357.cc-ic-copy.cc-ic-copied { background: var(--ic-clay-deep); border-color: var(--ic-clay-deep); color: #fff; }
358
359.cc-ic-below {
360 margin-top: 12px; font-size: 13px; color: var(--ic-gray-550);
361 display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline;
362}
363.cc-ic-below a { color: var(--ic-gray-700); border-bottom: 0.5px solid var(--ic-border-default); }
364.cc-ic-below a:hover { color: var(--ic-clay-deep); border-bottom-color: var(--ic-clay-deep); }
365.cc-ic-handoff {
366 padding: 22px 24px;
367 background: linear-gradient(180deg, #faf9f4 0%, #f3f1e9 100%);
368 border: 0.5px solid var(--ic-border-default);
369 border-radius: 12px;
370 box-shadow: 0 1px 2px rgba(31, 30, 29, 0.04), 0 6px 16px -4px rgba(31, 30, 29, 0.06);
371}
372.dark .cc-ic-handoff {
373 background: linear-gradient(180deg, #262624 0%, #1f1e1d 100%);
374 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px -4px rgba(0, 0, 0, 0.4);
375}
376.cc-ic-handoff-title {
377 font-size: 16px; font-weight: 550; color: var(--ic-slate);
378 letter-spacing: -0.01em; margin-bottom: 4px;
379}
380.cc-ic-handoff-sub {
381 font-size: 14px; line-height: 1.5; color: var(--ic-gray-700);
382 margin-bottom: 18px;
383}
384.cc-ic-handoff-actions { display: flex; gap: 10px; flex-wrap: wrap; }
385.cc-ic-handoff-alt {
386 margin-top: 12px; font-size: 12px; color: var(--ic-gray-550);
387}
388.cc-ic-handoff-alt code {
389 font-family: var(--ic-font-mono); font-size: 11px;
390 background: var(--ic-gray-150); padding: 2px 6px;
391 border-radius: 4px; color: var(--ic-gray-700);
392}
393.cc-ic-copy-sm {
394 appearance: none; border: none;
395 display: inline-flex; align-items: center; justify-content: center;
396 width: 22px; height: 22px;
397 margin-left: 4px; vertical-align: middle;
398 background: var(--ic-gray-150); color: var(--ic-gray-550);
399 border-radius: 4px;
400 transition: color 0.1s, background-color 0.1s;
401}
402.cc-ic-copy-sm:hover { color: var(--ic-gray-700); background: var(--ic-border-default); }
403.cc-ic-copy-sm.cc-ic-copied { background: var(--ic-clay-deep); color: #fff; }
404
405@media (max-width: 720px) {
406 .cc-ic-tab { padding: 12px 14px; font-size: 14px; }
407 .cc-ic-sales-actions { width: 100%; }
408 .cc-ic-card-body { padding: 20px; }
409 .cc-ic-cmd { font-size: 15px; }
410}
411`;
412 return <div className="cc-ic not-prose">
413 <style>{STYLES}</style>
414
415 {}
416 <div className="cc-ic-tab-strip" role="tablist">
417 {TABS.map(t => <button key={t.key} type="button" role="tab" aria-selected={target === t.key} className={'cc-ic-tab' + (target === t.key ? ' cc-ic-active' : '')} onClick={() => setTarget(t.key)}>
418 {t.label}
419 </button>)}
420 </div>
421
422 {}
423 <div className="cc-ic-team-wrap">
424 <button type="button" role="switch" aria-checked={team} className={'cc-ic-team-toggle' + (team ? ' cc-ic-checked' : '')} onClick={() => setTeam(!team)}>
425 <span className="cc-ic-check">{iconCheck(11)}</span>
426 <span>
427 I’m buying for a team or company (SSO, AWS/Azure/GCP, central billing)
428 </span>
429 </button>
430 </div>
431
432 {}
433 {team && <div className="cc-ic-team-reveal">
434 <div className="cc-ic-sales">
435 <div className="cc-ic-sales-text">
436 <strong>Set up your team:</strong> self-serve or talk to sales.
437 </div>
438 <div className="cc-ic-sales-actions">
439 <a href="https://claude.ai/upgrade?initialPlanType=team&utm_source=claude_code&utm_medium=docs&utm_content=configurator_team_get_started" className="cc-ic-btn-ghost">
440 Get started
441 </a>
442 <a href="https://www.anthropic.com/contact-sales?utm_source=claude_code&utm_medium=docs&utm_content=configurator_team_contact_sales" className="cc-ic-btn-clay">
443 Contact sales {iconArrowRight()}
444 </a>
445 </div>
446 </div>
447
448 <div className="cc-ic-provider-bar">
449 <span className="cc-ic-label">Run on</span>
450 <div className="cc-ic-provider-pills" role="radiogroup" aria-label="Provider">
451 {PROVIDERS.map(p => <button key={p.key} type="button" role="radio" aria-checked={provider === p.key} className={'cc-ic-p-pill' + (provider === p.key ? ' cc-ic-active' : '')} onClick={() => setProvider(p.key)}>
452 {p.label}
453 </button>)}
454 </div>
455 </div>
456
457 {showNotice && <div className="cc-ic-provider-notice">
458 {iconInfo()}
459 <div className="cc-ic-provider-notice-body">
460 {PROVIDER_NOTICE[provider]}
461 </div>
462 </div>}
463 </div>}
464
465 {}
466 {target === 'terminal' && <div className="cc-ic-card">
467 <div className="cc-ic-subtabs" role="tablist" aria-label="Install method">
468 {Object.keys(TERM).map(k => <button key={k} type="button" role="tab" aria-selected={pkg === k} className={'cc-ic-subtab' + (pkg === k ? ' cc-ic-active' : '')} onClick={() => setPkg(k)}>
469 {TERM[k].label}
470 </button>)}
471 </div>
472 {isWinInstaller && <div className="cc-ic-shell-switch" role="tablist" aria-label="Shell">
473 {[{
474 k: 'ps',
475 label: 'PowerShell'
476 }, {
477 k: 'cmd',
478 label: 'CMD'
479 }].map(({k, label}) => {
480 const active = k === 'cmd' === winCmd;
481 return <button key={k} type="button" role="tab" aria-selected={active} className={'cc-ic-shell-option' + (active ? ' cc-ic-active' : '')} onClick={() => setWinCmd(k === 'cmd')}>
482 {label}
483 </button>;
484 })}
485 </div>}
486 {cardBodyCmd(terminalCmd, isWinPrompt ? '>' : '$')}
487 </div>}
488
489 {}
490 {target === 'terminal' && <div className="cc-ic-below">
491 {isWinInstaller && <span>
492 <a href="https://git-scm.com/downloads/win" target="_blank" rel="noopener">
493 Git for Windows
494 </a>{' '}
495 recommended. PowerShell is used if Git Bash is absent.
496 </span>}
497 {(pkg === 'brew' || pkg === 'winget') && <span>
498 Does not auto-update. Run{' '}
499 <code>{pkg === 'brew' ? 'brew upgrade claude-code' : 'winget upgrade Anthropic.ClaudeCode'}</code>{' '}
500 periodically.
501 </span>}
502 <a href="/en/troubleshoot-install">Installation troubleshooting</a>
503 </div>}
504
505 {alt && <div className="cc-ic-handoff">
506 <div className="cc-ic-handoff-title">Claude Code for {alt.name}</div>
507 <div className="cc-ic-handoff-sub">{alt.tagline}</div>
508 <div className="cc-ic-handoff-actions">
509 <a href={alt.installHref} className="cc-ic-btn-clay" {...alt.installHref.startsWith('http') ? {
510 target: '_blank',
511 rel: 'noopener'
512 } : {}}>
513 {alt.installLabel} {iconArrowUpRight(13)}
514 </a>
515 <a href={alt.guideHref} className="cc-ic-btn-ghost">
516 {alt.name} guide {iconArrowRight(12)}
517 </a>
518 </div>
519 {alt.altCmd && <div className="cc-ic-handoff-alt">
520 or run <code>{alt.altCmd}</code>
521 <button type="button" className={'cc-ic-copy-sm' + (copied === 'alt' ? ' cc-ic-copied' : '')} onClick={() => handleCopy(alt.altCmd, 'alt')} aria-label="Copy command">
522 {copied === 'alt' ? iconCheck(11) : iconCopy(11)}
523 </button>
524 </div>}
525 </div>}
526 </div>;
527};
528
529export const Experiment = ({flag, treatment, children}) => {
530 const VID_KEY = 'exp_vid';
531 const CONSENT_COUNTRIES = new Set(['AT', 'BE', 'BG', 'HR', 'CY', 'CZ', 'DK', 'EE', 'FI', 'FR', 'DE', 'GR', 'HU', 'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL', 'PL', 'PT', 'RO', 'SK', 'SI', 'ES', 'SE', 'RE', 'GP', 'MQ', 'GF', 'YT', 'BL', 'MF', 'PM', 'WF', 'PF', 'NC', 'AW', 'CW', 'SX', 'FO', 'GL', 'AX', 'GB', 'UK', 'AI', 'BM', 'IO', 'VG', 'KY', 'FK', 'GI', 'MS', 'PN', 'SH', 'TC', 'GG', 'JE', 'IM', 'CA', 'BR', 'IN']);
532 const fnv1a = s => {
533 let h = 0x811c9dc5;
534 for (let i = 0; i < s.length; i++) {
535 h ^= s.charCodeAt(i);
536 h += (h << 1) + (h << 4) + (h << 7) + (h << 8) + (h << 24);
537 }
538 return h >>> 0;
539 };
540 const bucket = (seed, vid) => fnv1a(fnv1a(seed + vid) + '') % 10000 < 5000 ? 'control' : 'treatment';
541 const [decision] = useState(() => {
542 const params = new URLSearchParams(location.search);
543 const preBucketed = document.documentElement.dataset['gb_' + flag.replace(/-/g, '_')];
544 const force = params.get('gb-force');
545 if (force) {
546 for (const p of force.split(',')) {
547 const [k, v] = p.split(':');
548 if (k === flag) return {
549 variant: v || 'treatment',
550 track: false
551 };
552 }
553 }
554 if (navigator.globalPrivacyControl) {
555 return {
556 variant: 'control',
557 track: false
558 };
559 }
560 const prefsMatch = document.cookie.match(/(?:^|; )anthropic-consent-preferences=([^;]+)/);
561 if (prefsMatch) {
562 try {
563 if (JSON.parse(decodeURIComponent(prefsMatch[1])).analytics !== true) {
564 return {
565 variant: 'control',
566 track: false
567 };
568 }
569 } catch {
570 return {
571 variant: 'control',
572 track: false
573 };
574 }
575 } else {
576 const country = params.get('country')?.toUpperCase() || (document.cookie.match(/(?:^|; )cf_geo=([A-Z]{2})/) || [])[1];
577 if (!country || CONSENT_COUNTRIES.has(country)) {
578 return {
579 variant: 'control',
580 track: false
581 };
582 }
583 }
584 let vid;
585 try {
586 const ajsMatch = document.cookie.match(/(?:^|; )ajs_anonymous_id=([^;]+)/);
587 if (ajsMatch) {
588 vid = decodeURIComponent(ajsMatch[1]).replace(/^"|"$/g, '');
589 } else {
590 vid = localStorage.getItem(VID_KEY);
591 if (!vid) {
592 vid = crypto.randomUUID();
593 }
594 document.cookie = `ajs_anonymous_id=${vid}; domain=.claude.com; path=/; Secure; SameSite=Lax; max-age=31536000`;
595 }
596 try {
597 localStorage.setItem(VID_KEY, vid);
598 } catch {}
599 } catch {
600 return {
601 variant: 'control',
602 track: false
603 };
604 }
605 const variant = preBucketed === '1' ? 'treatment' : preBucketed === '0' ? 'control' : bucket(flag, vid);
606 return {
607 variant,
608 track: true,
609 vid
610 };
611 });
612 useEffect(() => {
613 if (!decision.track) return;
614 fetch('https://api.anthropic.com/api/event_logging/v2/batch', {
615 method: 'POST',
616 headers: {
617 'Content-Type': 'application/json',
618 'x-service-name': 'claude_code_docs'
619 },
620 body: JSON.stringify({
621 events: [{
622 event_type: 'GrowthbookExperimentEvent',
623 event_data: {
624 device_id: decision.vid,
625 anonymous_id: decision.vid,
626 timestamp: new Date().toISOString(),
627 experiment_id: flag,
628 variation_id: decision.variant === 'treatment' ? 1 : 0,
629 environment: 'production'
630 }
631 }]
632 }),
633 keepalive: true
634 }).catch(() => {});
635 }, []);
636 return decision.variant === 'treatment' ? treatment : children;
637};
638
639本快速开始指南将在几分钟内让您使用 AI 驱动的编码辅助。完成本指南后,您将了解如何使用 Claude Code 完成常见的开发任务。
640
641<Experiment flag="quickstart-install-configurator" treatment={<InstallConfigurator />} />
642
643## 开始前
644
645确保您拥有:
646
647* 打开的终端或命令提示符
648 * 如果您之前从未使用过终端,请查看[终端指南](/zh-CN/terminal-guide)
649* 一个可以使用的代码项目
650* 一个 [Claude 订阅](https://claude.com/pricing?utm_source=claude_code\&utm_medium=docs\&utm_content=quickstart_prereq)(Pro、Max、Teams 或 Enterprise)、[Claude Console](https://console.anthropic.com/) 账户,或通过[支持的云提供商](/zh-CN/third-party-integrations)的访问权限
651
652<Note>
653 本指南涵盖终端 CLI。Claude Code 也可在[网页](https://claude.ai/code)、[桌面应用](/zh-CN/desktop)、[VS Code](/zh-CN/vs-code) 和 [JetBrains IDE](/zh-CN/jetbrains)、[Slack](/zh-CN/slack) 中使用,以及通过 [GitHub Actions](/zh-CN/github-actions) 和 [GitLab](/zh-CN/gitlab-ci-cd) 进行 CI/CD。查看[所有界面](/zh-CN/overview#use-claude-code-everywhere)。
654</Note>
655
656## 步骤 1:安装 Claude Code
657
658To install Claude Code, use one of the following methods:
659
660<Tabs>
661 <Tab title="Native Install (Recommended)">
662 **macOS, Linux, WSL:**
663
664 ```bash theme={null}
665 curl -fsSL https://claude.ai/install.sh | bash
666 ```
667
668 **Windows PowerShell:**
669
670 ```powershell theme={null}
671 irm https://claude.ai/install.ps1 | iex
672 ```
673
674 **Windows CMD:**
675
676 ```batch theme={null}
677 curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd
678 ```
679
680 If you see `The token '&&' is not a valid statement separator`, you're in PowerShell, not CMD. If you see `'irm' is not recognized as an internal or external command`, you're in CMD, not PowerShell. Your prompt shows `PS C:\` when you're in PowerShell and `C:\` without the `PS` when you're in CMD.
681
682 [Git for Windows](https://git-scm.com/downloads/win) is recommended on native Windows so Claude Code can use the Bash tool. If Git for Windows is not installed, Claude Code uses PowerShell as the shell tool instead. WSL setups do not need Git for Windows.
683
684 <Info>
685 Native installations automatically update in the background to keep you on the latest version.
686 </Info>
687 </Tab>
688
689 <Tab title="Homebrew">
690 ```bash theme={null}
691 brew install --cask claude-code
692 ```
693
694 Homebrew offers two casks. `claude-code` tracks the stable release channel, which is typically about a week behind and skips releases with major regressions. `claude-code@latest` tracks the latest channel and receives new versions as soon as they ship.
695
696 <Info>
697 Homebrew installations do not auto-update. Run `brew upgrade claude-code` or `brew upgrade claude-code@latest`, depending on which cask you installed, to get the latest features and security fixes.
698 </Info>
699 </Tab>
700
701 <Tab title="WinGet">
702 ```powershell theme={null}
703 winget install Anthropic.ClaudeCode
704 ```
705
706 <Info>
707 WinGet installations do not auto-update. Run `winget upgrade Anthropic.ClaudeCode` periodically to get the latest features and security fixes.
708 </Info>
709 </Tab>
710</Tabs>
711
712You can also install with [apt, dnf, or apk](/en/setup#install-with-linux-package-managers) on Debian, Fedora, RHEL, and Alpine.
713
714## 步骤 2:登录您的账户
715
716Claude Code 需要账户才能使用。当您使用 `claude` 命令启动交互式会话时,您需要登录:
717
718```bash theme={null}
719claude
720# 首次使用时系统会提示您登录
721```
722
723```bash theme={null}
724/login
725# 按照提示使用您的账户登录
726```
727
728您可以使用以下任何账户类型登录:
729
730* [Claude Pro、Max、Teams 或 Enterprise](https://claude.com/pricing?utm_source=claude_code\&utm_medium=docs\&utm_content=quickstart_login)(推荐)
731* [Claude Console](https://console.anthropic.com/)(具有预付费额度的 API 访问)。首次登录时,Console 中会自动为集中成本跟踪创建一个"Claude Code"工作区。
732* [Amazon Bedrock、Google Vertex AI 或 Microsoft Foundry](/zh-CN/third-party-integrations)(企业云提供商)
733
734登录后,您的凭证将被存储,您无需再次登录。要稍后切换账户,请使用 `/login` 命令。
735
736## 步骤 3:启动您的第一个会话
737
738在任何项目目录中打开您的终端并启动 Claude Code:
739
740```bash theme={null}
741cd /path/to/your/project
742claude
743```
744
745您将看到 Claude Code 欢迎屏幕,其中包含您的会话信息、最近的对话和最新更新。输入 `/help` 查看可用命令,或输入 `/resume` 继续之前的对话。
746
747<Tip>
748 登录后(步骤 2),您的凭证将存储在您的系统上。在[凭证管理](/zh-CN/authentication#credential-management)中了解更多信息。
749</Tip>
750
751## 步骤 4:提出您的第一个问题
752
753让我们从理解您的代码库开始。尝试以下命令之一:
754
755```text theme={null}
756这个项目做什么?
757```
758
759Claude 将分析您的文件并提供摘要。您也可以提出更具体的问题:
760
761```text theme={null}
762这个项目使用什么技术?
763```
764
765```text theme={null}
766主入口点在哪里?
767```
768
769```text theme={null}
770解释文件夹结构
771```
772
773您也可以询问 Claude 关于其自身功能的问题:
774
775```text theme={null}
776Claude Code 能做什么?
777```
778
779```text theme={null}
780我如何在 Claude Code 中创建自定义 skills?
781```
782
783```text theme={null}
784Claude Code 可以与 Docker 一起工作吗?
785```
786
787<Note>
788 Claude Code 根据需要读取您的项目文件。您不必手动添加上下文。
789</Note>
790
791## 步骤 5:进行您的第一次代码更改
792
793现在让我们让 Claude Code 进行一些实际的编码。尝试一个简单的任务:
794
795```text theme={null}
796在主文件中添加一个 hello world 函数
797```
798
799Claude Code 将:
800
8011. 找到适当的文件
8022. 向您显示建议的更改
8033. 请求您的批准
8044. 进行编辑
805
806<Note>
807 Claude Code 在修改文件前始终请求许可。您可以批准单个更改或为会话启用"全部接受"模式。
808</Note>
809
810## 步骤 6:在 Claude Code 中使用 Git
811
812Claude Code 使 Git 操作变得对话式:
813
814```text theme={null}
815我更改了哪些文件?
816```
817
818```text theme={null}
819用描述性消息提交我的更改
820```
821
822您也可以提示更复杂的 Git 操作:
823
824```text theme={null}
825创建一个名为 feature/quickstart 的新分支
826```
827
828```text theme={null}
829显示我最后的 5 次提交
830```
831
832```text theme={null}
833帮我解决合并冲突
834```
835
836## 步骤 7:修复错误或添加功能
837
838Claude 擅长调试和功能实现。
839
840用自然语言描述您想要的内容:
841
842```text theme={null}
843向用户注册表单添加输入验证
844```
845
846或修复现有问题:
847
848```text theme={null}
849有一个错误,用户可以提交空表单 - 修复它
850```
851
852Claude Code 将:
853
854* 定位相关代码
855* 理解上下文
856* 实现解决方案
857* 如果可用,运行测试
858
859## 步骤 8:尝试其他常见工作流
860
861有多种方式可以与 Claude 一起工作:
862
863**重构代码**
864
865```text theme={null}
866重构身份验证模块以使用 async/await 而不是回调
867```
868
869**编写测试**
870
871```text theme={null}
872为计算器函数编写单元测试
873```
874
875**更新文档**
876
877```text theme={null}
878使用安装说明更新 README
879```
880
881**代码审查**
882
883```text theme={null}
884审查我的更改并建议改进
885```
886
887<Tip>
888 像与有帮助的同事交谈一样与 Claude 交谈。描述您想要实现的目标,它将帮助您实现。
889</Tip>
890
891## 基本命令
892
893以下是日常使用中最重要的命令:
894
895| 命令 | 功能 | 示例 |
896| ------------------- | -------------- | ----------------------------------- |
897| `claude` | 启动交互模式 | `claude` |
898| `claude "task"` | 运行一次性任务 | `claude "fix the build error"` |
899| `claude -p "query"` | 运行一次性查询,然后退出 | `claude -p "explain this function"` |
900| `claude -c` | 在当前目录中继续最近的对话 | `claude -c` |
901| `claude -r` | 恢复之前的对话 | `claude -r` |
902| `claude commit` | 创建 Git 提交 | `claude commit` |
903| `/clear` | 清除对话历史 | `/clear` |
904| `/help` | 显示可用命令 | `/help` |
905| `exit` 或 Ctrl+C | 退出 Claude Code | `exit` |
906
907有关完整的命令列表,请参阅 [CLI 参考](/zh-CN/cli-reference)。
908
909## 初学者专业提示
910
911有关更多信息,请参阅[最佳实践](/zh-CN/best-practices)和[常见工作流](/zh-CN/common-workflows)。
912
913<AccordionGroup>
914 <Accordion title="对您的请求要具体">
915 不要说:'修复错误'
916
917 尝试:'修复登录错误,用户输入错误凭证后看到空白屏幕'
918 </Accordion>
919
920 <Accordion title="使用分步说明">
921 将复杂任务分解为步骤:
922
923 ```text theme={null}
924 1. 为用户配置文件创建新的数据库表
925 2. 创建 API 端点以获取和更新用户配置文件
926 3. 构建允许用户查看和编辑其信息的网页
927 ```
928 </Accordion>
929
930 <Accordion title="让 Claude 先探索">
931 在进行更改之前,让 Claude 理解您的代码:
932
933 ```text theme={null}
934 分析数据库架构
935 ```
936
937 ```text theme={null}
938 构建一个仪表板,显示英国客户最常退货的产品
939 ```
940 </Accordion>
941
942 <Accordion title="使用快捷方式节省时间">
943 * 按 `?` 查看所有可用的快捷键
944 * 使用 Tab 进行命令补全
945 * 按 ↑ 查看命令历史
946 * 输入 `/` 查看所有命令和 skills
947 </Accordion>
948</AccordionGroup>
949
950## 接下来呢?
951
952现在您已经学习了基础知识,探索更多高级功能:
953
954<CardGroup cols={2}>
955 <Card title="Claude Code 如何工作" icon="microchip" href="/zh-CN/how-claude-code-works">
956 了解代理循环、内置工具以及 Claude Code 如何与您的项目交互
957 </Card>
958
959 <Card title="最佳实践" icon="star" href="/zh-CN/best-practices">
960 通过有效的提示和项目设置获得更好的结果
961 </Card>
962
963 <Card title="常见工作流" icon="graduation-cap" href="/zh-CN/common-workflows">
964 常见任务的分步指南
965 </Card>
966
967 <Card title="扩展 Claude Code" icon="puzzle-piece" href="/zh-CN/features-overview">
968 使用 CLAUDE.md、skills、hooks、MCP 等进行自定义
969 </Card>
970</CardGroup>
971
972## 获取帮助
973
974* **在 Claude Code 中**:输入 `/help` 或询问「我如何...」
975* **文档**:您在这里!浏览其他指南
976* **社区**:加入我们的 [Discord](https://www.anthropic.com/discord) 获取提示和支持