第五节
练习项目设置
准备一个真实项目来配合 Claude Code 学习
配合一个真实项目来使用 Claude Code 会更加有趣和有效。我准备了一个小型项目供大家探索——它就是之前视频中展示的 UI 生成应用。
💡
提示：你不必一定要运行这个项目。如果你愿意，完全可以使用自己的代码库来跟随后续课程的学习。
项目下载
项目设置步骤
1安装 Node.js
确保你的电脑上已安装 Node.js 运行环境
前往 Node.js 官网下载2下载并解压项目
下载上方提供的 uigen.zip 文件，并将其解压到你喜欢的目录
3安装依赖并初始化数据库
在项目目录中运行以下命令来安装依赖并设置本地 SQLite 数据库
npm run setup4启动项目
运行以下命令启动开发服务器
npm run dev可选：配置 GLM Coding Plan（国内用户推荐）
此项目使用 AI 模型来生成 UI 组件。国内用户可以使用智谱 GLM Coding Plan，无需科学上网即可使用。
GLM Coding Plan 优势：
- • 国内直连，无需科学上网
- • 支持 Claude Code、Cursor、Cline 等多种编码工具
- • 使用 GLM-4.7 模型，性能优秀
1注册智谱开放平台账号
访问智谱开放平台2订阅 GLM Coding Plan 套餐
登录后前往套餐详情页选择适合的订阅套餐
3获取 API Key
在个人中心页面，点击 API Keys，创建一个新的 API Key
4配置环境变量（三种方式任选其一）
方式一：自动化助手（推荐）
npx @z_ai/coding-helper运行后按照界面提示操作即可自动完成配置
方式二：自动化脚本（MacOS/Linux）
curl -O "https://cdn.bigmodel.cn/install/claude_code_env.sh" && bash ./claude_code_env.sh方式三：手动配置
MacOS/Linux（在终端运行，替换 your_zhipu_api_key）：
export ANTHROPIC_AUTH_TOKEN="your_zhipu_api_key" export ANTHROPIC_BASE_URL="https://open.bigmodel.cn/api/anthropic" export CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC=1
Windows PowerShell：
[System.Environment]::SetEnvironmentVariable('ANTHROPIC_AUTH_TOKEN', 'your_zhipu_api_key', 'User')
[System.Environment]::SetEnvironmentVariable('ANTHROPIC_BASE_URL', 'https://open.bigmodel.cn/api/anthropic', 'User')
[System.Environment]::SetEnvironmentVariable('CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC', '1', 'User')项目技术栈
Node.js
运行环境
SQLite
本地数据库
Anthropic API
AI 生成能力