1import{_ as d,c as t,b as r,a as n,d as l,e as a,w as i,r as p,o as c}from"./app-BNAFTfp7.js";const o={};function u(h,s){const e=p("RouteLink");return c(),t("div",null,[s[7]||(s[7]=r(`<h1 id="_01-å¿«éå ¥é¨" tabindex="-1"><a class="header-anchor" href="#_01-å¿«éå ¥é¨"><span>01 - å¿«éå ¥é¨</span></a></h1><blockquote><p>ð 15åéå¿«éä¸æ Claude Codeï¼å¼å¯ AI è¾ å©ç¼ç¨ä¹æ </p></blockquote><hr><h2 id="ð-æ¬ç« ç®æ " tabindex="-1"><a class="header-anchor" href="#ð-æ¬ç« ç®æ "><span>ð æ¬ç« ç®æ </span></a></h2><ul><li>â ç解ä»ä¹æ¯ Claude Code</li><li>â å®æå®è£ ååºç¡é ç½®</li><li>â å建第ä¸ä¸ª AI è¾ å©é¡¹ç®</li><li>â ææ¡åºæ¬æä½æµç¨</li></ul><p><strong>é¢è®¡ç¨æ¶</strong>: 15-20åé</p><hr><h2 id="ð¤-ä»ä¹æ¯-claude-code" tabindex="-1"><a class="header-anchor" href="#ð¤-ä»ä¹æ¯-claude-code"><span>ð¤ ä»ä¹æ¯ Claude Codeï¼</span></a></h2><h3 id="æ ¸å¿å®ä¹" tabindex="-1"><a class="header-anchor" href="#æ ¸å¿å®ä¹"><span>æ ¸å¿å®ä¹</span></a></h3><p><strong>Claude Code</strong> æ¯æå° <strong>Claude AI</strong>ï¼ç± Anthropic å¼åç大åè¯è¨æ¨¡åï¼éæå°ä»£ç ç¼è¾å¨ä¸ç AI ç¼ç¨å©æï¼ä¸»è¦éè¿ <strong>Cursor</strong> ç¼è¾å¨å®ç°ã</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text"><pre><code class="language-text"><span class="line">Claude AI (大è)</span> 2<span class="line"> +</span> 3<span class="line">Cursor Editor (è½½ä½)</span> 4<span class="line"> +</span> 5<span class="line">ä½ çåæ (çµé)</span> 6<span class="line"> =</span> 7<span class="line">Claude Code (è¶ çº§ç¼ç¨ä½éª)</span> 8<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><hr><h3 id="ä¸ä¼ ç»ç¼ç¨çåºå«" tabindex="-1"><a class="header-anchor" href="#ä¸ä¼ ç»ç¼ç¨çåºå«"><span>ä¸ä¼ ç»ç¼ç¨çåºå«</span></a></h3><h4 id="ä¼ ç»ç¼ç¨æ¹å¼" tabindex="-1"><a class="header-anchor" href="#ä¼ ç»ç¼ç¨æ¹å¼"><span>ä¼ ç»ç¼ç¨æ¹å¼</span></a></h4><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text"><pre><code class="language-text"><span class="line">ä½ â æè â ç¼å代ç â è°è¯ â å®æ</span> 9<span class="line"> (100%人工)</span> 10<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="claude-code-æ¹å¼" tabindex="-1"><a class="header-anchor" href="#claude-code-æ¹å¼"><span>Claude Code æ¹å¼</span></a></h4><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text"><pre><code class="language-text"><span class="line">ä½ â æè¿°éæ± â Claude çæ代ç â ä½ å®¡æ¥è°æ´ â å®æ</span> 11<span class="line"> (AIè¾ å©ï¼æçâ10å)</span> 12<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><hr><h3 id="claude-çç¬ç¹ä¼å¿" tabindex="-1"><a class="header-anchor" href="#claude-çç¬ç¹ä¼å¿"><span>Claude çç¬ç¹ä¼å¿</span></a></h3><table><thead><tr><th>ç¹æ§</th><th>Claude 3.5 Sonnet</th><th>说æ</th></tr></thead><tbody><tr><td><strong>ä¸ä¸æçªå£</strong></td><td>200K tokens</td><td>â 150,000 è¯æ 500 页代ç </td></tr><tr><td><strong>代ç ç解</strong></td><td>âââââ</td><td>ç解å¤æ项ç®ç»æ</td></tr><tr><td><strong>å¤è¯è¨æ¯æ</strong></td><td>50+</td><td>PythonãJSãTSãGoãRust...</td></tr><tr><td><strong>å®å ¨æ§</strong></td><td>Constitutional AI</td><td>æç»çææ害代ç </td></tr><tr><td><strong>ååºé度</strong></td><td><2ç§</td><td>å¿«é交äºä½éª</td></tr></tbody></table><hr><h2 id="ð ï¸-å®è£ ä¸é ç½®" tabindex="-1"><a class="header-anchor" href="#ð ï¸-å®è£ ä¸é ç½®"><span>ð ï¸ å®è£ ä¸é ç½®</span></a></h2><h3 id="åç½®è¦æ±" tabindex="-1"><a class="header-anchor" href="#åç½®è¦æ±"><span>åç½®è¦æ±</span></a></h3><ul><li><strong>æä½ç³»ç»</strong>: macOS / Windows / Linux</li><li><strong>å å</strong>: 建议 8GB+</li><li><strong>ç½ç»</strong>: 稳å®çäºèç½è¿æ¥</li><li><strong>API</strong>: Claude API Keyï¼å¯éï¼Cursor æå ç½®é¢åº¦ï¼</li></ul><hr><h3 id="æ¥éª¤1-å®è£ -cursor" tabindex="-1"><a class="header-anchor" href="#æ¥éª¤1-å®è£ -cursor"><span>
12æ¥éª¤1: å®è£ Cursor</span></a></h3><h4 id="macos" tabindex="-1"><a class="header-anchor" href="#macos"><span>macOS</span></a></h4><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh"><pre><code class="language-bash"><span class="line"><span class="token comment"># æ¹æ³1: å®ç½ä¸è½½</span></span> 13<span class="line"><span class="token comment"># è®¿é® https://cursor.sh</span></span> 14<span class="line"><span class="token comment"># ä¸è½½ .dmg æ件并å®è£ </span></span> 15<span class="line"></span> 16<span class="line"><span class="token comment"># æ¹æ³2: Homebrew</span></span> 17<span class="line">brew <span class="token function">install</span> <span class="token parameter variable">--cask</span> cursor</span> 18<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="windows" tabindex="-1"><a class="header-anchor" href="#windows"><span>Windows</span></a></h4><div class="language-powershell line-numbers-mode" data-highlighter="prismjs" data-ext="powershell"><pre><code class="language-powershell"><span class="line"><span class="token comment"># è®¿é® https://cursor.sh</span></span> 19<span class="line"><span class="token comment"># ä¸è½½ .exe å®è£ å </span></span> 20<span class="line"><span class="token comment"># è¿è¡å®è£ å导</span></span> 21<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="linux" tabindex="-1"><a class="header-anchor" href="#linux"><span>Linux</span></a></h4><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh"><pre><code class="language-bash"><span class="line"><span class="token comment"># ä¸è½½ AppImage</span></span> 22<span class="line"><span class="token function">wget</span> https://download.cursor.sh/linux/appImage/x64</span> 23<span class="line"><span class="token function">chmod</span> +x cursor-*.AppImage</span> 24<span class="line">./cursor-*.AppImage</span> 25<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><hr><h3 id="æ¥éª¤2-é¦æ¬¡å¯å¨é ç½®" tabindex="-1"><a class="header-anchor" href="#æ¥éª¤2-é¦æ¬¡å¯å¨é ç½®"><span>æ¥éª¤2: é¦æ¬¡å¯å¨é ç½®</span></a></h3><h4 id="_2-1-éæ©-ai-模å" tabindex="-1"><a class="header-anchor" href="#_2-1-éæ©-ai-模å"><span>2.1 éæ© AI 模å</span></a></h4><p>æå¼ Cursor åï¼</p><ol><li>æ <code>Cmd/Ctrl + Shift + P</code> æå¼å½ä»¤é¢æ¿</li><li>è¾å ¥ "Settings"</li><li>éæ© "Cursor Settings"</li><li>éæ©æ¨¡åï¼</li></ol><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text"><pre><code class="language-text"><span class="line">æ¨èé ç½®:</span> 26<span class="line">- 主模å: Claude 3.5 Sonnet (æ强)</span> 27<span class="line">- å¿«é模å: Claude 3 Haiku (çé¢åº¦)</span> 28<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><hr><h4 id="_2-2-设置-api-key-å¯é" tabindex="-1"><a class="header-anchor" href="#_2-2-设置-api-key-å¯é"><span>2.2 设置 API Keyï¼å¯éï¼</span></a></h4><p><strong>å è´¹é¢åº¦ï¼å ç½®ï¼</strong>:</p><ul><li>æ¯æ 500 次请æ±</li><li>éå轻度使ç¨</li></ul><p><strong>èªå®ä¹ API Key</strong>:</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text"><pre><code class="language-text"><span class="line">Settings â Cursor â API Keys â Add Claude API Key</span> 29<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p>è·å API Key:</p><ol><li>è®¿é® https://console.anthropic.com</li><li>注åè´¦å·</li><li>å建 API Key</li><li>å¤å¶å¹¶ç²è´´å° Cursor</li></ol><hr><h3 id="æ¥éª¤3-åºç¡è®¾ç½®" tabindex="-1"><a class="header-anchor" href="#æ¥éª¤3-åºç¡è®¾ç½®"><span>
29æ¥éª¤3: åºç¡è®¾ç½®</span></a></h3><h4 id="æ¨èé ç½®" tabindex="-1"><a class="header-anchor" href="#æ¨èé ç½®"><span>æ¨èé ç½®</span></a></h4><div class="language-json line-numbers-mode" data-highlighter="prismjs" data-ext="json"><pre><code class="language-json"><span class="line"><span class="token comment">// .cursorrules æ件 (项ç®æ ¹ç®å½)</span></span> 30<span class="line"><span class="token punctuation">{</span></span> 31<span class="line"> <span class="token property">"model"</span><span class="token operator">:</span> <span class="token string">"claude-3-5-sonnet-20241022"</span><span class="token punctuation">,</span></span> 32<span class="line"> <span class="token property">"rules"</span><span class="token operator">:</span> <span class="token punctuation">[</span></span> 33<span class="line"> <span class="token string">"代ç é£æ ¼ï¼ä½¿ç¨ ESLint/Prettier æ å"</span><span class="token punctuation">,</span></span> 34<span class="line"> <span class="token string">"注éï¼ä¸ºå¤æé»è¾æ·»å æ¸ æ°æ³¨é"</span><span class="token punctuation">,</span></span> 35<span class="line"> <span class="token string">"æµè¯ï¼ä¸ºæ ¸å¿åè½çæåå æµè¯"</span><span class="token punctuation">,</span></span> 36<span class="line"> <span class="token string">"ç±»åå®å ¨ï¼TypeScript 项ç®å¯ç¨ä¸¥æ ¼æ¨¡å¼"</span></span> 37<span class="line"> <span class="token punctuation">]</span><span class="token punctuation">,</span></span> 38<span class="line"> <span class="token property">"context"</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> 39<span class="line"> <span class="token property">"include"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"src/**/*"</span><span class="token punctuation">,</span> <span class="token string">"docs/**/*"</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span> 40<span class="line"> <span class="token property">"exclude"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"node_modules"</span><span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">,</span> <span class="token string">".git"</span><span class="token punctuation">]</span></span> 41<span class="line"> <span class="token punctuation">}</span></span> 42<span class="line"><span class="token punctuation">}</span></span> 43<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><hr><h2 id="ð¯-第ä¸ä¸ª-ai-è¾ å©é¡¹ç®" tabindex="-1"><a class="header-anchor" href="#ð¯-第ä¸ä¸ª-ai-è¾ å©é¡¹ç®"><span>ð¯ 第ä¸ä¸ª AI è¾ å©é¡¹ç®</span></a></h2><h3 id="项ç®-å建ä¸ä¸ª-todo-app" tabindex="-1"><a class="header-anchor" href="#项ç®-å建ä¸ä¸ª-todo-app"><span>项ç®ï¼å建ä¸ä¸ª Todo App</span></a></h3><p>让æä»¬ç¨ Claude Code å建ä¸ä¸ªç®åç Todo åºç¨ï¼ä½éª AI è¾ å©å¼åçé åã</p><hr><h3 id="step-1-项ç®åå§å" tabindex="-1"><a class="header-anchor" href="#step-1-项ç®åå§å"><span>Step 1: 项ç®åå§å</span></a></h3><h4 id="_1-1-å建项ç®æ件夹" tabindex="-1"><a class="header-anchor" href="#_1-1-å建项ç®æ件夹"><span>1.1 å建项ç®æ件夹</span></a></h4><p>å¨ Cursor ä¸ï¼</p><ol><li><strong>File â Open Folder</strong></li><li>éæ©æå建æ件夹 <code>my-todo-app</code></li></ol><hr><h4 id="_1-2-ä¸-claude-对è¯" tabindex="-1"><a class="header-anchor" href="#_1-2-ä¸-claude-对è¯"><span>1.2 ä¸ Claude 对è¯</span></a></h4><p>æ <code>Cmd/Ctrl + L</code> æå¼ Chat é¢æ¿ï¼è¾å ¥ï¼</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text"><pre><code class="language-text"><span class="line">请帮æå建ä¸ä¸ª React + TypeScript ç Todo App 项ç®ç»æï¼</span> 44<span class="line">å æ¬ï¼</span> 45<span class="line">1. åºç¡é ç½®æ件</span> 46<span class="line">2. æ件夹ç»æ</span> 47<span class="line">3. å¿ è¦çä¾èµ</span> 48<span class="line"></span> 49<span class="line">项ç®éæ±ï¼</span> 50<span class="line">- ä½¿ç¨ Vite æ建</span> 51<span class="line">- æ¯ææ·»å ãå é¤ãæ è®°å®æå¾ åäºé¡¹</span> 52<span class="line">- ä½¿ç¨ Tailwind CSS æ ·å¼</span> 53<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><hr><h4 id="_1-3-claude-ä¼çæ" tabindex="-1"><a class="header-anchor" href="#_1-3-claude-ä¼çæ"><span>1.3 Claude ä¼çæ</span></a></h4><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text"><pre><code class="language-text"><span class="line">my-todo-app/</span> 54<span class="line">âââ package.json</span> 55<span class="line">âââ tsconfig.json</span> 56<span class="line">âââ vite.config.ts</span> 57<span class="line">âââ index.html</span> 58<span class="line">âââ src/</span> 59<span class="line">â âââ main.tsx</span> 60<span class="line">â âââ App.tsx</span> 61<span class="line">â âââ components/</span> 62<span class="line">â â âââ TodoList.tsx</span> 63<span class="line">â â âââ TodoItem.tsx</span> 64<span class="line">â â âââ AddTodo.tsx</span> 65<span class="line">â âââ types/</span> 66<span class="line">â â âââ todo.ts</span> 67<span class="line">â âââ styles/</span> 68<span class="line">â âââ index.css</span> 69<span class="line">âââ README.md</span> 70<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>ç¹å» "Apply"</strong>ï¼Claude ä¼èªå¨å建æææ件ï¼</p><hr><h3 id="step-2-ç¼åæ ¸å¿åè½" tabindex="-1"><a class="header-anchor" href="#step-2-ç¼åæ ¸å¿åè½"><span>Step 2: ç¼åæ ¸å¿åè½</span></a></h3><h4 id="_2-1-使ç¨-cmd-ctrl-k-inline-模å¼" tabindex="-1"><a class="header-anchor" href="#_2-1-使ç¨-cmd-ctrl-k-inline-模å¼"><span>2.1 ä½¿ç¨ Cmd/Ctrl + Kï¼Inline 模å¼ï¼</span></a></h4><ol><li>æå¼ <code>src/App.tsx</code></li><li>æ <code>Cmd/Ctrl + K</code></li><li>è¾å ¥ Promptï¼</li></ol><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text"><pre><code class="language-text"><span class="line">å®ç° Todo App çæ ¸å¿é»è¾ï¼</span> 71<span class="line">- ç¶æ管çä½¿ç¨ useState</span> 72<span class="line">- æ¯ææ·»å ãå é¤ãåæ¢å®æç¶æ</span> 73<span class="line">- æ°æ®æä¹ åå° localStorage</span> 74<span class="line">- æ·»å ä¼é çå¨ç»ææ</span> 75<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Claude ä¼ç´æ¥å¨æ件ä¸çæ代ç ï¼</p><hr><h4 id="_2-2-å¤æ件ç¼è¾" tabindex="-1"><a class="header-anchor" href="#_2-2-å¤æ件ç¼è¾"><span>2.2 å¤æ件ç¼è¾</span></a></h4><p>æ³è¦åæ¶ä¿®æ¹å¤ä¸ªç¸å ³æ件ï¼</p><ol><li>å¨ Chat ä¸è¾å ¥ï¼</li></ol><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text"><pre><code class="language-text"><span class="line">ç°å¨è®©æ们ï¼</span> 76<span class="line">1. å¨ TodoItem.tsx ä¸æ·»å ç¼è¾åè½</span> 77<span class="line">2. å¨ TodoList.tsx ä¸æ·»å è¿æ»¤åè½ï¼å ¨é¨/å·²å®æ/æªå®æï¼</span> 78<span class="line">3. å¨ App.tsx ä¸æ´åè¿äºåè½</span> 79<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Claude ä¼ç解ä¸ä¸æï¼åæ¶ç¼è¾å¤ä¸ªæ件ï¼</p><hr><h3 id="step-3-è¿è¡é¡¹ç®" tabindex="-1"><a class="header-anchor" href="#step-3-è¿è¡é¡¹ç®"><span>Step 3: è¿è¡é¡¹ç®</span></a></h3><h4 id="_3-1-å®è£ ä¾èµ" tabindex="-1"><a class="header-anchor" href="#_3-1-å®è£ ä¾èµ"><span>3.1 å®è£ ä¾èµ</span></a></h4><p>å¨ç»ç«¯ï¼Cursor å ç½®ï¼ï¼</p><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh"><pre><code class="language-bash"><span class="line"><span class="token function">npm</span> <span class="token function">install</span></span> 80<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h4 id="_3-2-å¯å¨å¼åæå¡å¨" tabindex="-1"><a class="header-anchor" href="#_3-2-å¯å¨å¼åæå¡å¨"><span>3.2 å¯å¨å¼åæå¡å¨</span></a></h4><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh"><pre><code class="language-bash"><span class="line"><span class="token function">npm</span> run dev</span> 81<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div>
81<h4 id="_3-3-æ¥çç»æ" tabindex="-1"><a class="header-anchor" href="#_3-3-æ¥çç»æ"><span>3.3 æ¥çç»æ</span></a></h4><p>æµè§å¨æå¼ <code>http://localhost:5173</code></p><p>ð <strong>æåï¼ä½ ç第ä¸ä¸ª AI è¾ å©é¡¹ç®å®æäºï¼</strong></p><hr><h2 id="ð®-åºæ¬æä½æµç¨" tabindex="-1"><a class="header-anchor" href="#ð®-åºæ¬æä½æµç¨"><span>ð® åºæ¬æä½æµç¨</span></a></h2><h3 id="æ ¸å¿å¿«æ·é®" tabindex="-1"><a class="header-anchor" href="#æ ¸å¿å¿«æ·é®"><span>æ ¸å¿å¿«æ·é®</span></a></h3><table><thead><tr><th>å¿«æ·é®</th><th>åè½</th><th>使ç¨åºæ¯</th></tr></thead><tbody><tr><td><code>Cmd/Ctrl + L</code></td><td>æå¼ Chat</td><td>é¿å¯¹è¯ãå¤æéæ±</td></tr><tr><td><code>Cmd/Ctrl + K</code></td><td>Inline Edit</td><td>å¿«éä¿®æ¹å½åæ件</td></tr><tr><td><code>Cmd/Ctrl + I</code></td><td>Composer</td><td>å¤æ件项ç®çº§æä½</td></tr><tr><td><code>Cmd/Ctrl + Shift + L</code></td><td>æ¸ ç©ºä¸ä¸æ</td><td>éæ°å¼å§å¯¹è¯</td></tr><tr><td><code>Tab</code></td><td>æ¥å建议</td><td>éç¨ AI çæç代ç </td></tr><tr><td><code>Esc</code></td><td>æç»å»ºè®®</td><td>ä¸ä½¿ç¨ AI 建议</td></tr></tbody></table><hr><h3 id="ä¸ç§äº¤äºæ¨¡å¼" tabindex="-1"><a class="header-anchor" href="#ä¸ç§äº¤äºæ¨¡å¼"><span>ä¸ç§äº¤äºæ¨¡å¼</span></a></h3><h4 id="_1-chat-模å¼-cmd-l" tabindex="-1"><a class="header-anchor" href="#_1-chat-模å¼-cmd-l"><span>1. Chat æ¨¡å¼ (Cmd + L)</span></a></h4><p><strong>éå</strong>ï¼</p><ul><li>询é®é®é¢</li><li>讨论æ¶æ</li><li>å¦ä¹ ç¥è¯</li><li>éè¦è§£é说æ</li></ul><p><strong>示ä¾</strong>ï¼</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text"><pre><code class="language-text"><span class="line">User: 解éä¸ä¸ React Hooks çéå é·é±</span> 82<span class="line"></span> 83<span class="line">Claude: [详ç»è§£é + 代ç 示ä¾]</span> 84<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><hr><h4 id="_2-inline-模å¼-cmd-k" tabindex="-1"><a class="header-anchor" href="#_2-inline-模å¼-cmd-k"><span>2. Inline æ¨¡å¼ (Cmd + K)</span></a></h4><p><strong>éå</strong>ï¼</p><ul><li>å¿«éä¿®æ¹ä»£ç </li><li>éæå½æ°</li><li>æ·»å åè½</li><li>ä¿®å¤ Bug</li></ul><p><strong>示ä¾</strong>ï¼</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text"><pre><code class="language-text"><span class="line">[éä¸ä¸ä¸ªå½æ°]</span> 85<span class="line">Cmd + K</span> 86<span class="line">Prompt: æ·»å é误å¤çå loading ç¶æ</span> 87<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><hr><h4 id="_3-composer-模å¼-cmd-i" tabindex="-1"><a class="header-anchor" href="#_3-composer-模å¼-cmd-i"><span>3. Composer æ¨¡å¼ (Cmd + I)</span></a></h4><p><strong>éå</strong>ï¼</p><ul><li>å建æ°åè½ï¼æ¶åå¤æ件ï¼</li><li>éæ模å</li><li>项ç®çº§ä¿®æ¹</li></ul><p><strong>示ä¾</strong>ï¼</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text"><pre><code class="language-text"><span class="line">Cmd + I</span> 88<span class="line">Prompt: æ·»å ç¨æ·è®¤è¯ç³»ç»ï¼å æ¬ç»å½ã注åãå¯ç éç½®</span> 89<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><hr><h3 id="å·¥ä½æµç¨ç¤ºä¾" tabindex="-1"><a class="header-anchor" href="#å·¥ä½æµç¨ç¤ºä¾"><span>å·¥ä½æµç¨ç¤ºä¾</span></a></h3><h4 id="å ¸åçå¼åæµç¨" tabindex="-1"><a class="header-anchor" href="#å ¸åçå¼åæµç¨"><span>å ¸åçå¼åæµç¨</span></a></h4><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text"><pre><code class="language-text"><span class="line">1. éæ±åæï¼Chatï¼</span> 90<span class="line"> "ææ³æ·»å ç¨æ·è¯è®ºåè½ï¼éè¦åªäºæ¥éª¤ï¼"</span> 91<span class="line"> </span> 92<span class="line">2. æ¶æ设计ï¼Chatï¼</span> 93<span class="line"> "æ¨èä¸ä¸ªè¯è®ºç³»ç»çæ°æ®åºè®¾è®¡"</span> 94<span class="line"> </span> 95<span class="line">3. 代ç çæï¼Composerï¼</span> 96<span class="line"> "å建è¯è®ºç³»ç»çåå端代ç "</span> 97<span class="line"> </span> 98<span class="line">4. ç»èè°æ´ï¼Inlineï¼</span> 99<span class="line">
99 [éä¸å ·ä½ä»£ç ] Cmd+K "ä¼åè¿æ®µä»£ç çæ§è½"</span> 100<span class="line"> </span> 101<span class="line">5. æµè¯ï¼Chatï¼</span> 102<span class="line"> "为è¯è®ºåè½çæåå æµè¯"</span> 103<span class="line"> </span> 104<span class="line">6. ææ¡£ï¼Chatï¼</span> 105<span class="line"> "çæ API ææ¡£"</span> 106<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><hr><h2 id="ð¡-å®ç¨-prompt-模æ¿" tabindex="-1"><a class="header-anchor" href="#ð¡-å®ç¨-prompt-模æ¿"><span>ð¡ å®ç¨ Prompt 模æ¿</span></a></h2><h3 id="å建åè½" tabindex="-1"><a class="header-anchor" href="#å建åè½"><span>å建åè½</span></a></h3><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text"><pre><code class="language-text"><span class="line">å建ä¸ä¸ª [åè½å称]ï¼è¦æ±ï¼</span> 107<span class="line">- åè½1</span> 108<span class="line">- åè½2</span> 109<span class="line">- åè½3</span> 110<span class="line"></span> 111<span class="line">ææ¯æ ï¼[React/Vue/...] + [TypeScript/...] + [å ¶ä»]</span> 112<span class="line">代ç é£æ ¼ï¼[ç®æ´/详ç»æ³¨é/...]</span> 113<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><hr><h3 id="ä¿®å¤é®é¢" tabindex="-1"><a class="header-anchor" href="#ä¿®å¤é®é¢"><span>ä¿®å¤é®é¢</span></a></h3><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text"><pre><code class="language-text"><span class="line">å½å代ç åå¨é®é¢ï¼</span> 114<span class="line">[æè¿°é®é¢]</span> 115<span class="line"></span> 116<span class="line">ææè¡ä¸ºï¼</span> 117<span class="line">[ææç»æ]</span> 118<span class="line"></span> 119<span class="line">请帮æä¿®å¤å¹¶è§£éåå </span> 120<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><hr><h3 id="ä¼å代ç " tabindex="-1"><a class="header-anchor" href="#ä¼å代ç "><span>ä¼å代ç </span></a></h3><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text"><pre><code class="language-text"><span class="line">ä¼å以ä¸ä»£ç ï¼</span> 121<span class="line">- æ§è½ä¼å</span> 122<span class="line">- å¯è¯»æ§æå</span> 123<span class="line">- æ·»å é误å¤ç</span> 124<span class="line">- éµå¾ªæä½³å®è·µ</span> 125<span class="line"></span> 126<span class="line">[ç²è´´ä»£ç ]</span> 127<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><hr><h3 id="å¦ä¹ ç解" tabindex="-1"><a class="header-anchor" href="#å¦ä¹ ç解"><span>å¦ä¹ ç解</span></a></h3><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text"><pre><code class="language-text"><span class="line">请解éè¿æ®µä»£ç ï¼</span> 128<span class="line">[ç²è´´ä»£ç ]</span> 129<span class="line"></span> 130<span class="line">å æ¬ï¼</span> 131<span class="line">1. æ´ä½åè½</span> 132<span class="line">2. å ³é®æ¥éª¤</span> 133<span class="line">3. æä½³å®è·µ</span> 134<span class="line">4. æ½å¨é®é¢</span> 135<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><hr><h2 id="â ï¸-æ°æ常è§é®é¢" tabindex="-1"><a class="header-anchor" href="#â ï¸-æ°æ常è§é®é¢"><span>â ï¸ æ°æ常è§é®é¢</span></a></h2><h3 id="é®é¢1-ai-çæç代ç ä¸ç¬¦åé¢æ" tabindex="-1"><a class="header-anchor" href="#é®é¢1-ai-çæç代ç ä¸ç¬¦åé¢æ"><span>é®é¢1: AI çæç代ç ä¸ç¬¦åé¢æ</span></a></h3><p><strong>åå </strong>: Prompt ä¸å¤å ·ä½</p><p><strong>解å³</strong>:</p><div class="language-diff line-numbers-mode" data-highlighter="prismjs" data-ext="diff"><pre><code class="language-diff"><span class="line"><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> "å建ä¸ä¸ªè¡¨å"</span> 136<span class="line"></span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> "å建ä¸ä¸ªç¨æ·æ³¨å表åï¼å å«ï¼</span> 137<span class="line"></span><span class="token prefix inserted">+</span><span class="token line"> - é®ç®±éªè¯ï¼æ£åï¼</span> 138<span class="line"></span><span class="token prefix inserted">+</span><span class="token line"> - å¯ç 强度æ£æ¥ï¼8ä½+大å°å+æ°åï¼</span> 139<span class="line"></span><span class="token prefix inserted">+</span><span class="token line"> - 确认å¯ç å¹é </span> 140<span class="line"></span><span class="token prefix inserted">+</span><span class="token line"> - æ交æ¶æ¾ç¤ºloading</span> 141<span class="line"></span><span class="token prefix inserted">+</span><span class="token line"> - æåå跳转å°é¦é¡µ"</span> 142<span class="line"></span></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><hr><h3 id="é®é¢2-claude-没æ读åç¸å ³æ件" tabindex="-1"><a class="header-anchor" href="#é®é¢2-claude-没æ读åç¸å ³æ件"><span>é®é¢2: Claude 没æ读åç¸å ³æ件</span></a></h3><p><strong>åå </strong>: ä¸ä¸ææªæ£ç¡®å¼ç¨</p><p><strong>解å³</strong>:</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text"><pre><code class="language-text"><span class="line">æ¹æ³1: ä½¿ç¨ @ 符å·å¼ç¨</span> 143<span class="line">"åºäº @database.ts ä¸çç±»åï¼å建API"</span> 144<span class="line"></span> 145<span class="line">
145æ¹æ³2: å¨ Composer ä¸æ·»å æ件</span> 146<span class="line">ç¹å» "Add Context" â éæ©ç¸å ³æ件</span> 147<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><hr><h3 id="é®é¢3-åç太é¿æ太ç" tabindex="-1"><a class="header-anchor" href="#é®é¢3-åç太é¿æ太ç"><span>é®é¢3: åç太é¿æ太ç</span></a></h3><p><strong>解å³</strong>:</p><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text"><pre><code class="language-text"><span class="line">太é¿: "请ç®ææ¼è¦å°..."</span> 148<span class="line">太ç: "请详ç»è§£éï¼å å«ä»£ç 示ä¾..."</span> 149<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><hr><h3 id="é®é¢4-çæç代ç æé误" tabindex="-1"><a class="header-anchor" href="#é®é¢4-çæç代ç æé误"><span>é®é¢4: çæç代ç æé误</span></a></h3><p><strong>ä¸è¦æ ï¼è¿å¾æ£å¸¸</strong></p><ol><li>åè¯ Claude åªéæé®é¢</li><li>ç²è´´é误信æ¯</li><li>Claude ä¼ä¿®å¤</li></ol><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text"><pre><code class="language-text"><span class="line">åæç代ç å¨è¿è¡æ¶æ¥éï¼</span> 150<span class="line">[é误信æ¯]</span> 151<span class="line"></span> 152<span class="line">请修å¤</span> 153<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><hr><h2 id="â -æ£æ¥æ¸ å" tabindex="-1"><a class="header-anchor" href="#â -æ£æ¥æ¸ å"><span>â æ£æ¥æ¸ å</span></a></h2><p>å®ææ¬ç« åï¼ä½ åºè¯¥è½å¤ï¼</p><ul><li>[ ] ç解 Claude Code çåºæ¬æ¦å¿µ</li><li>[ ] æåå®è£ 并é ç½® Cursor</li><li>[ ] å建第ä¸ä¸ª AI è¾ å©é¡¹ç®</li><li>[ ] 使ç¨ä¸ç§äº¤äºæ¨¡å¼ï¼Chat/Inline/Composerï¼</li><li>[ ] ç¼åææç Prompt</li><li>[ ] 解å³å¸¸è§é®é¢</li></ul><hr><h2 id="ð¯-ç»ä¹ ä»»å¡" tabindex="-1"><a class="header-anchor" href="#ð¯-ç»ä¹ ä»»å¡"><span>ð¯ ç»ä¹ ä»»å¡</span></a></h2><h3 id="ä»»å¡1-æ©å±-todo-app" tabindex="-1"><a class="header-anchor" href="#ä»»å¡1-æ©å±-todo-app"><span>ä»»å¡1: æ©å± Todo App</span></a></h3><p>å¨æ们ç Todo App åºç¡ä¸ï¼</p><ul><li>[ ] æ·»å æªæ¢æ¥æåè½</li><li>[ ] æ·»å ä¼å 级æ ç¾</li><li>[ ] æ·»å æç´¢åè½</li><li>[ ] ä¼å UI æ ·å¼</li></ul><p><strong>æ示</strong>: ä½¿ç¨ Composer 模å¼ä¸æ¬¡æ§å®æ</p><hr><h3 id="ä»»å¡2-å建æ°é¡¹ç®" tabindex="-1"><a class="header-anchor" href="#ä»»å¡2-å建æ°é¡¹ç®"><span>ä»»å¡2: å建æ°é¡¹ç®</span></a></h3><p>ä»é¶å¼å§å建ï¼</p><ul><li>[ ] 天æ°æ¥è¯¢åºç¨ï¼è°ç¨å¤©æ°APIï¼</li><li>[ ] Markdown ç¬è®°æ¬</li><li>[ ] 计ç®å¨</li></ul><p><strong>ææ</strong>: å°è¯ç¨ä¸åçææ¯æ </p><hr><h3 id="ä»»å¡3-å¦ä¹ 代ç " tabindex="-1"><a class="header-anchor" href="#ä»»å¡3-å¦ä¹ 代ç "><span>ä»»å¡3: å¦ä¹ 代ç </span></a></h3><p>让 Claude 解éä¸äºå¼æºé¡¹ç®ç代ç ï¼</p><ul><li>[ ] Clone ä¸ä¸ª GitHub 项ç®</li><li>[ ] ç¨ Chat 询é®æ¶æ设计</li><li>[ ] 让 Claude 解éæ ¸å¿æ¨¡å</li></ul><hr><h2 id="ð-延伸é 读" tabindex="-1"><a class="header-anchor" href="#ð-延伸é 读"><span>ð 延伸é 读</span></a></h2>`,170)),n("ul",null,[n("li",null,[l(e,{to:"/ai-programming/claude/02-core-features.html"},{default:i(()=>[...s[0]||(s[0]=[a("02 - æ ¸å¿ç¹ç¹",-1)])]),_:1}),s[1]||(s[1]=a(" - æ·±å ¥äºè§£ Claude ç强大è½å",-1))]),n("li",null,[l(e,{to:"/ai-programming/claude/09-tips-tricks.html"},{default:i(()=>[...s[2]||(s[2]=[a("09 - 使ç¨è¯çª",-1)])]),_:1}),s[3]||(s[3]=a(" - æ´å¤å®ç¨æå·§",-1))]),s[4]||(s[4]=n("li",null,[n("a",{href:"https://docs.anthropic.com/",target:"_blank",rel:"noopener noreferrer"},"å®æ¹ææ¡£")],-1))]),s[8]||(s[8]=n("hr",null,null,-1)),s[9]||(s[9]=n("h2",{id:"ð¬-ä¸ä¸æ¥",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#ð¬-ä¸ä¸æ¥"},[n("span",null,"ð¬ ä¸ä¸æ¥")])],-1)),s[10]||(s[10]=n("p",null,"æ
153åå®æå¿«éå
¥é¨ï¼ð",-1)),s[11]||(s[11]=n("p",null,"ç°å¨ä½ å·²ç»ï¼",-1)),s[12]||(s[12]=n("ul",null,[n("li",null,"â
ææ¡äºåºæ¬æä½"),n("li",null,"â
å建äºç¬¬ä¸ä¸ªé¡¹ç®"),n("li",null,"â
ç解äºå·¥ä½æµç¨")],-1)),s[13]||(s[13]=n("p",null,[n("strong",null,"åå¤å¥½æ·±å
¥äºè§£æ ¸å¿ç¹ç¹äºåï¼")],-1)),n("p",null,[s[6]||(s[6]=a("ð ",-1)),l(e,{to:"/ai-programming/claude/02-core-features.html"},{default:i(()=>[...s[5]||(s[5]=[a("继ç»å¦ä¹ ï¼02 - æ ¸å¿ç¹ç¹",-1)])]),_:1})]),s[14]||(s[14]=n("hr",null,null,-1)),s[15]||(s[15]=n("div",{align:"center"},[n("p",null,[n("strong",null,"ð ç°å¨å°±å¼å§ä½¿ç¨ Claude Codeï¼ä½éª AI è¾
å©ç¼ç¨çä¹è¶£ï¼")]),n("p",null,[n("em",null,'"The best time to start was yesterday. The next best time is now."')])],-1))])}const m=d(o,[["render",u]]),b=JSON.parse('{"path":"/ai-programming/claude/01-quick-start.html","title":"01 - å¿«éå
¥é¨","lang":"zh-CN","frontmatter":{},"git":{"updatedTime":1766413539000,"contributors":[{"name":"wsyx","username":"","email":"[email protected]","commits":1}],"changelog":[{"hash":"6f88b92aa0bd0fb67a38a1ba536877d410aa38fb","time":1766413539000,"email":"[email protected]","author":"wsyx","message":"featï¼æç« ç»æä¼å"}]},"filePathRelative":"ai-programming/claude/01-quick-start.md"}');export{m as comp,b as data};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.