1. 零基础也能跑通ClaudeCode Vite Vue3 TypeScript 做个人主页你可能听过 ClaudeCode但还没真正用它从零做出一个能跑起来的项目。这篇就解决这个问题用 ClaudeCode 配合 Vite Vue3 TypeScript做一个带渐变背景、粒子动效、技能卡片、响应式布局的个人网页。全程你主要负责描述需求、确认命令代码交给 AI 写。适合谁看刚装好 Node.js 和 ClaudeCode、会一点终端操作、但没怎么写过 Vue3 的人。做完你会得到一个能本地预览、能构建打包的完整项目并且掌握一套可复用的 ClaudeCode 配置骨架。我试过把整个流程拆成“先搭骨架、再填内容、最后微调”三步实测下来比一次性把需求全丢给 AI 更稳出错也更好定位。下面从接入配置开始一步步来。2. 前置准备把 TaoToken 统一 Key 接进 ClaudeCodeClaudeCode 本身是个命令行工具它需要一个模型通道来干活。这里用 TaoToken 作为统一入口官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址是 https://taotoken.net/api 。你需要先拿到一个 API Key。登录后进入控制台在 API Keys 页面创建一个新 Key复制保存好。这个 Key 就是后面配置里要填的凭证。注意Key 只显示一次建议创建后立刻存到密码管理器里别直接写进会提交到 Git 的文件。ClaudeCode 的配置分两层一层是环境变量告诉它请求发往哪个 API 地址另一层是项目里的 settings.json用来固化模型和权限策略。先设置环境变量在终端里执行export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_API_KEY你刚才复制的Key如果你用的是 Windows PowerShell写法是$env:ANTHROPIC_BASE_URLhttps://taotoken.net/api $env:ANTHROPIC_API_KEY你刚才复制的Key设置完可以用echo $ANTHROPIC_BASE_URL确认一下有没有生效。这一步做完ClaudeCode 就知道该往哪儿发请求了。3. 可复制配置settings.json 骨架与项目初始化环境变量是临时的关掉终端就没了。更稳的做法是在项目里放一个.claude/settings.json把常用配置固化下来。先建项目目录mkdir my-portfolio cd my-portfolio然后在项目根目录创建.claude/settings.json内容如下{ model: claude-sonnet-4-20250514, permissions: { allow: [ Bash(npm create:*), Bash(npm install:*), Bash(npm run:*), Edit, Write ], deny: [ Bash(rm -rf:*), Bash(curl:*) ] }, env: { ANTHROPIC_BASE_URL: https://taotoken.net/api } }这里几个字段的作用model指定默认模型permissions.allow列出允许自动执行的操作比如创建项目、装依赖、跑脚本、改文件permissions.deny是黑名单防止误删或外发请求env把 API 地址固化进项目换终端也不用重设。提示deny里的Bash(rm -rf:*)是保险丝AI 再聪明也可能手滑这条能挡住大部分危险删除。配置好后启动 ClaudeCodeclaude进入交互界面后输入第一条指令让它初始化项目帮我用 Vite Vue3 初始化一个项目项目名就是当前目录。 使用 TypeScript不需要 ESLint 和 Prettier保持简洁。ClaudeCode 会执行类似这样的命令npm create vitelatest ./ -- --template vue-ts npm install它请求权限时输入y确认。装完后你会看到package.json、vite.config.ts、tsconfig.json和src/目录都出现了。这一步是整个流程的地基地基稳了后面才顺。4. 生成页面从需求描述到炫酷个人主页项目骨架有了接下来是核心用自然语言描述你要的页面。别怕描述得细越具体 AI 越不容易跑偏。在 ClaudeCode 里输入现在帮我实现一个炫酷的个人展示页面要求如下 1. 整体风格深色主题科技感现代简约 2. 背景深色渐变背景从深蓝到深紫加上动态粒子效果 3. 页面布局从上到下 - 顶部导航栏半透明毛玻璃效果包含首页关于技能联系四个链接 - Hero区域居中展示个人头像用占位图、姓名张三、 一句话介绍全栈开发工程师 | AI爱好者 - 技能展示区用卡片网格展示6个技能Vue、React、Node.js、 Python、Docker、AI每个卡片有图标和进度条 - 联系区域邮箱、GitHub、微信三个联系方式用图标展示 - 页脚版权信息 4. 动效要求 - 卡片悬停时有上浮效果 - 页面滚动时各区域渐入效果 - 技能进度条有动画加载效果 5. 响应式手机端适配 把所有内容写在 App.vue 和 style.css 中就行不需要拆分太多组件。ClaudeCode 会开始创建和修改文件写 HTML 结构、CSS 样式、JavaScript 逻辑。粒子效果它一般会用 Canvas 实现滚动渐入会用 IntersectionObserver。过程中它可能问“是否安装某依赖”输入y即可。等它写完让它启动开发服务器帮我启动开发服务器我要预览效果。它会执行npm run dev然后告诉你访问地址通常是http://localhost:5173。浏览器打开你应该能看到深色渐变背景、浮动粒子、居中个人信息卡片。如果效果和预期有差距别急下一步就是微调。5. 验证请求与构建确认页面真的跑通了预览只是第一步还要确认构建也能过。先做几个验证动作。第一检查开发服务器是否正常响应。在另一个终端执行curl -I http://localhost:5173看到HTTP/1.1 200 OK就说明服务起来了。第二让 ClaudeCode 帮你加打字机效果和项目时间轴继续输入在 Hero 区域的介绍文字加一个打字机效果逐字显示全栈开发工程师 | AI爱好者。 在技能区域和联系区域之间添加一个项目经历板块用时间轴形式展示3个项目 1. 在线商城2024.01 - 2024.06 2. 数据可视化平台2024.07 - 2024.12 3. AI智能助手2025.01 - 至今 每个项目包含名称、时间、简介、技术标签。第三跑一次生产构建确认 TypeScript 类型没问题npm run build如果输出dist/目录且没有报错说明类型检查和打包都通过了。这一步很关键很多人本地预览正常但构建报类型错误提前跑一次能省很多事。第四本地预览构建产物npm run preview打开它给的地址确认生产版本和开发版本表现一致。到这里一个完整的个人主页就算跑通了。6. 本篇常见错排查报错一ANTHROPIC_BASE_URL没生效请求发不出去。现象是 ClaudeCode 一直转圈或提示连接失败。先echo $ANTHROPIC_BASE_URL确认变量存在再检查.claude/settings.json里的env字段有没有写对。两个地方地址要一致都是https://taotoken.net/api。报错二npm create vite卡住或权限被拒。多半是settings.json的allow里没放行对应命令。把Bash(npm create:*)和Bash(npm install:*)加进去重启 ClaudeCode 再试。报错三构建时 TypeScript 报Cannot find module。通常是依赖没装全。在项目根目录执行npm install再跑npm run build。如果还报让 ClaudeCode 检查tsconfig.json的include是否覆盖了src/。报错四粒子效果在手机端卡顿。Canvas 粒子数量太多。让 ClaudeCode 根据屏幕宽度动态调整粒子数比如小于 768px 时减半。这类优化直接描述现象给它就行。报错五改了代码页面没更新。Vite 热更新偶尔会失灵。先刷新浏览器还不行就CtrlC停掉npm run dev重新启动。构建产物预览用npm run preview别和开发服务器搞混。7. 继续往下走把配置和验证动作固定成习惯这套流程跑通一次后建议把.claude/settings.json当成项目标配。每开一个新项目先复制这份骨架改改allow列表就行。API Key 走环境变量别写进文件这是底线。想验证模型对话效果可以去模型对话页面试试不同提示词长期做编码和 Agent 任务Coding Plan 更划算需要管理多个 Key 或查看用量进控制台接入文档里有更细的 API 说明。地址分别是模型对话https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewriteCoding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite控制台https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewriteAPI Keyshttps://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite接入文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite最后留个实用习惯每完成一个大步骤让 ClaudeCode 帮你提交一次 Git提交信息写清楚做了什么。这样出问题能回滚也能看清自己一步步是怎么搭起来的。