综合实战：构建完整的AI辅助开发体系
通过前面章节的学习，我们已经分别掌握了CLAUDE.md规范、Skills系统、MCP服务器、Subagents与Teams、Hooks自动化以及配置文件管理。本节将把这些模块整合起来，构建一套完整的AI辅助开发体系，让Claude Code真正成为你的智能开发伙伴。
一、需求分析：什么样的配置才算"完整"？
在开始配置之前，我们需要明确一个"完整"的AI开发体系应该具备哪些能力：
1.1 核心能力清单
| 能力类别 | 功能描述 | 重要性 |
|---|---|---|
| 项目理解 | AI能理解项目规范、技术栈、编码风格 | ★★★★★ |
| 技能复用 | 可重用的技能包，避免重复提示 | ★★★★★ |
| 外部扩展 | 连接外部数据源、API、工具 | ★★★★ |
| 团队协作 | 多AI代理分工协作 | ★★★ |
| 自动化流程 | 事件触发的自动操作 | ★★★★ |
| 配置管理 | 灵活的配置切换与维护 | ★★★★ |
1.2 配置层次结构
Claude Code 配置体系
├── 基础层：CLAUDE.md（项目规范）
├── 技能层：Skills（可复用能力）
├── 扩展层：MCP Servers（外部工具）
├── 协作层：Subagents & Teams（分工协作）
├── 自动化层：Hooks（事件驱动）
└── 配置层：settings.json（环境管理）
text
二、完整配置步骤
让我们从零开始，一步步构建完整的配置体系。
2.1 初始化项目配置
首先在项目根目录创建.claude目录结构：
# 创建目录结构
mkdir -p .claude/skills
mkdir -p .claude/commands
mkdir -p .claude/hooks
mkdir -p .claude/subagents
mkdir -p .claude/memory
bash
2.2 配置CLAUDE.md项目规范
在项目根目录创建CLAUDE.md文件：
# AI时代前端组件库实战课程 - 项目规范
## 项目概述
本课程是一个AI辅助开发的前端组件库实战项目，使用Vue3 + Vite + TypeScript技术栈。
## 技术栈
- **框架**: Vue 3.5+
- **构建工具**: Vite 8.x
- **语言**: TypeScript 7.x
- **样式**: UnoCSS + TailwindCSS
- **包管理**: pnpm
## 编码规范
### 命名约定
- 组件文件：PascalCase（如`ButtonGroup.vue`）
- 工具函数：camelCase（如`formatDate.ts`）
- 常量：UPPER_SNAKE_CASE（如`API_BASE_URL`）
- 接口：PascalCase + I前缀（如`IUserOptions`）
### 代码风格
- 使用2空格缩进
- 使用单引号
- 语句末尾加分号
- 组件使用Composition API + `<script setup>`
## 目录结构
markdown
src/ ├── components/ # 通用组件 ├── composables/ # 组合式函数 ├── utils/ # 工具函数 ├── types/ # 类型定义 └── styles/ # 全局样式
## 开发工作流
### AI辅助开发流程
1. 使用`/component`技能创建新组件
2. 使用`/layout-fix`命令修复布局问题
3. 使用`/commit`技能提交代码
### Git提交规范
遵循Conventional Commits规范：
- feat: 新功能
- fix: 修复bug
- docs: 文档更新
- style: 代码格式调整
- refactor: 重构
- test: 测试相关
- chore: 构建/工具相关
## 常见命令
```bash
pnpm dev # 启动开发服务器
pnpm build # 构建生产版本
pnpm test # 运行测试
pnpm lint # 代码检查
text
注意事项
- 所有组件必须编写类型定义
- 复杂逻辑需要添加注释说明
- 提交前确保lint通过
### 2.3 创建常用Skills
在`.claude/skills`目录创建技能文件：
#### Skill 1: 组件生成技能
创建`.claude/skills/component-generator/skill.md`：
```markdown
---
description: 生成符合项目规范的Vue3组件
---
## 任务
根据用户需求创建一个完整的Vue3组件。
## 输入参数
- componentName: 组件名称（PascalCase）
- features: 组件功能描述
- props: 组件属性列表
## 输出规范
1. 创建组件文件：`src/components/{componentName}.vue`
2. 创建类型文件：`src/types/I{componentName}.ts`
3. 使用`<script setup>`语法
4. 添加基础样式（使用UnoCSS）
5. 包含props、emits、slots定义
## 组件模板
\`\`\`vue
<script setup lang="ts">
import type { I{{componentName}}Props } from '@/types/I{{componentName}}'
interface Props extends I{{componentName}}Props {}
const props = withDefaults(defineProps<Props>(), {
// 默认值
})
const emit = defineEmits<{
change: [value: any]
}>()
</script>
<template>
<div class="{{kebabCase componentName}}">
<!-- 组件内容 -->
</div>
</template>
<style scoped lang="scss">
.{{kebabCase componentName}} {
/* 样式定义 */
}
</style>
\`\`\`
text
Skill 2: API请求技能
创建.claude/skills/api-fetcher/skill.md：
---
description: 创建类型安全的API请求函数
---
## 任务
创建一个类型安全的API请求函数。
## 输入参数
- apiName: API名称
- method: HTTP方法
- endpoint: 接口路径
- requestType: 请求类型
- responseType: 响应类型
## 输出规范
1. 创建`src/api/{apiName}.ts`
2. 定义请求/响应类型
3. 使用fetch API
4. 包含错误处理
5. 添加JSDoc注释
## 代码模板
\`\`\`typescript
import type { {{responseType}} } from '@/types/{{apiName}}'
const API_BASE = import.meta.env.VITE_API_BASE
/**
* {{API描述}}
* @param params 请求参数
* @returns Promise<{{responseType}}>
*/
export async function {{camelCase apiName}}(params: {{requestType}}): Promise<{{responseType}}> {
const response = await fetch(\`\${API_BASE}{{endpoint}}\`, {
method: '{{method}}',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(params),
})
if (!response.ok) {
throw new Error(\`{{apiName}} failed: \${response.statusText}\`)
}
return response.json()
}
\`\`\`
markdown
2.4 配置MCP服务器
创建.claude/settings.local.json：
{
"mcpServers": {
"filesystem": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-filesystem", "/Users/toimc/Downloads/2025vite+vue3课程"]
},
"github": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-github"],
"env": {
"GITHUB_TOKEN": "${GITHUB_TOKEN}"
}
},
"brave-search": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-brave-search"],
"env": {
"BRAVE_API_KEY": "${BRAVE_API_KEY}"
}
},
"postgres": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-postgres", "postgresql://localhost:5432/mydb"]
}
},
"enableAllProjectMcpServers": true
}
json
环境变量配置（.env文件）：
# GitHub API Token（用于代码仓库操作）
GITHUB_TOKEN=ghp_xxxxxxxxxxxxxxxxxxxx
# Brave Search API Key（用于网络搜索）
BRAVE_API_KEY=BSxxxxxxxxxxxxx
# 数据库连接
DATABASE_URL=postgresql://user:password@localhost:5432/mydb
bash
2.5 配置Commands（用户命令）
创建.claude/commands/review.md：
---
description: 代码审查助手，分析代码质量并提供改进建议
---
## 任务
对指定的代码或文件进行全面的代码审查。
## 审查维度
1. **代码规范**：检查是否符合项目编码规范
2. **类型安全**：检查TypeScript类型使用
3. **性能问题**：识别潜在的性能瓶颈
4. **安全性**：检查常见安全漏洞
5. **可维护性**：评估代码可读性和可维护性
## 输出格式
\`\`\`
# 代码审查报告
## 总体评分： (4/5)
## 发现的问题
### 严重问题
- [问题描述]
### 警告
- [问题描述]
### 改进建议
- [建议描述]
## 修复方案
[具体的修复代码示例]
\`\`\`
markdown
创建.claude/commands/test.md：
---
description: 为指定组件生成单元测试
---
## 任务
为Vue3组件生成完整的单元测试。
## 测试框架
- Vitest
- Vue Test Utils
- @testing-library/vue
## 测试覆盖
1. Props渲染
2. Events触发
3. Slots内容
4. 边界情况
5. 错误处理
## 输出文件
`src/components/__tests__/{componentName}.test.ts`
markdown
2.6 配置Hooks（自动化触发）
创建.claude/hooks/pre-commit.md：
---
description: Git提交前自动执行代码检查
trigger:
event: pre-commit
---
## 任务
在每次Git提交前自动执行以下检查：
1. **Lint检查**：运行`pnpm lint`
2. **类型检查**：运行`pnpm type-check`
3. **测试检查**：运行`pnpm test`
4. **构建检查**：运行`pnpm build`
## 失败处理
如果任何检查失败：
- 向用户报告具体错误
- 提供修复建议
- 询问是否继续提交
## 成功处理
所有检查通过后：
- 自动生成规范的commit message
- 显示提交摘要
markdown
创建.claude/hooks/file-saved.md：
---
description: 文件保存后自动格式化
trigger:
event: file-saved
pattern: "**/*.{vue,ts,js}"
---
## 任务
当Vue/TS/JS文件保存时自动执行：
1. **格式化代码**：使用Prettier
2. **排序imports**：使用eslint-plugin-simple-import-sort
3. **添加版权头**（如需要）
## 自动修复
对于可以自动修复的问题，直接修改文件，不询问用户。
markdown
2.7 配置Subagents（专业代理）
创建.claude/subagents/ui-designer.json：
{
"name": "ui-designer",
"description": "UI/UX设计专家，负责组件视觉设计",
"model": "claude-sonnet-4-6",
"systemPrompt": "你是一位资深的UI/UX设计师，精通现代Web设计原则。\n\n你的职责：\n1. 设计美观且易用的用户界面\n2. 选择合适的色彩、字体、间距\n3. 确保设计符合无障碍标准\n4. 提供设计系统和规范\n\n设计原则：\n- 简洁优先，避免过度设计\n- 保持视觉一致性\n- 注重微交互和动画\n- 响应式设计",
"tools": ["Read", "Write", "Edit", "Bash"],
"temperature": 0.7,
"maxTokens": 4000
}
json
创建.claude/subagents/performance-expert.json：
{
"name": "performance-expert",
"description": "性能优化专家，分析和优化代码性能",
"model": "claude-opus-4-6",
"systemPrompt": "你是一位前端性能优化专家，精通Vue3性能优化。\n\n优化方向：\n1. 组件渲染优化\n2. 代码分割和懒加载\n3. 资源加载优化\n4. 内存泄漏排查\n\n工具使用：\n- 使用Chrome DevTools分析\n- 使用Lighthouse评分\n- 使用Bundle Analyzer",
"tools": ["Read", "Edit", "Bash", "mcp__playwright__browser_navigate"],
"temperature": 0.3
}
json
2.8 配置Teams（团队协作）
创建.claude/teams/frontend-development.json：
{
"name": "frontend-development",
"description": "前端开发团队，协同完成组件开发",
"members": [
{
"agentId": "ui-designer",
"role": "设计",
"responsibilities": ["UI设计", "交互设计", "设计规范"]
},
{
"agentId": "performance-expert",
"role": "性能优化",
"responsibilities": ["性能分析", "优化建议", "性能监控"]
},
{
"agentId": "default",
"role": "开发",
"responsibilities": ["组件实现", "单元测试", "文档编写"]
}
],
"workflow": [
{"step": 1, "agent": "ui-designer", "task": "设计组件UI"},
{"step": 2, "agent": "default", "task": "实现组件逻辑"},
{"step": 3, "agent": "performance-expert", "task": "性能审查"},
{"step": 4, "agent": "default", "task": "编写测试和文档"}
]
}
json
三、验证配置效果
配置完成后，我们需要验证每个模块是否正常工作。
3.1 验证CLAUDE.md
测试命令：
# 向Claude询问项目规范
"这个项目使用什么技术栈？"
"创建一个新的按钮组件"
bash
预期输出：
根据项目规范，本课程使用以下技术栈：
- 框架: Vue 3.4+
- 构建工具: Vite 5.x
- 语言: TypeScript 5.x
text
3.2 验证Skills
测试命令：
# 使用组件生成技能
/skill component-generator --componentName=LoadingSpinner --features="支持颜色和大小自定义"
bash
预期输出：
✓ 创建文件: src/components/LoadingSpinner.vue
✓ 创建文件: src/types/ILoadingSpinner.ts
✓ 组件已生成，包含以下功能：
- color属性（默认：#1976d2）
- size属性（默认：32px）
- 基于CSS动画的旋转效果
text
3.3 验证MCP服务器
测试命令：
# 测试文件系统MCP
"列出src/components目录下的所有组件文件"
# 测试GitHub MCP
"检查项目的最新release版本"
# 测试搜索MCP
"搜索Vue3 Composition API最佳实践"
bash
预期输出：
=== MCP服务器状态 ===
✓ filesystem: 已连接
✓ github: 已连接
✓ brave-search: 已连接
src/components目录:
- Button.vue
- Input.vue
- LoadingSpinner.vue
text
3.4 验证Commands
测试命令：
# 代码审查
/review src/components/Button.vue
bash
预期输出：
# 代码审查报告
## 总体评分： (4/5)
## 发现的问题
### 警告
- Props缺少默认值可能导致未定义行为
- 建议添加displayName用于调试
### 改进建议
- 可以使用defineOptions简化组件配置
- 考虑添加动画过渡效果
## 修复方案
[具体代码示例...]
text
3.5 验证Hooks
测试操作：
# 1. 修改一个Vue文件
# 2. 执行git commit
bash
预期输出：
🔍 正在执行提交前检查...
Running pnpm lint...
✓ Lint检查通过
Running pnpm type-check...
✓ 类型检查通过
Running pnpm test...
✓ 测试通过
✅ 所有检查通过，可以提交
建议的commit message:
feat: add LoadingSpinner component with customizable color and size
text
3.6 验证Subagents
测试命令：
# 调用UI设计师代理
"@ui-designer 请为LoadingSpinner组件设计一套颜色方案"
bash
预期输出：
🎨 UI设计师正在分析...
根据LoadingSpinner组件的特点，我建议以下颜色方案：
主色调（推荐）：
- Primary: #1976d2（蓝色 - 科技感）
- Success: #4caf50（绿色 - 成功状态）
- Warning: #ff9800（橙色 - 警告状态）
- Error: #f44336（红色 - 错误状态）
中性色：
- Light: #f5f5f5（浅色背景）
- Dark: #212121（深色文字）
应用示例：
<LoadingSpinner color="primary" size="32" />
text
3.7 验证Teams
测试命令：
# 启动团队协作
"@team frontend-development 请开发一个DatePicker组件"
bash
预期输出：
🚀 启动前端开发团队工作流
[Step 1/4] @ui-designer 正在设计组件UI...
✓ 设计完成：已生成组件规范和视觉设计稿
[Step 2/4] @default 正在实现组件逻辑...
✓ 实现完成：DatePicker.vue已创建
[Step 3/4] @performance-expert 正在进行性能审查...
✓ 审查完成：已优化虚拟滚动逻辑
[Step 4/4] @default 正在编写测试和文档...
✓ 完成：测试覆盖率92%，文档已生成
📦 任务完成！
- 组件: src/components/DatePicker.vue
- 测试: src/components/__tests__/DatePicker.test.ts
- 文档: docs/components/DatePicker.md
text
四、配置清单检查表
完成配置后，使用以下清单逐项检查：
4.1 基础配置
| 检查项 | 状态 | 说明 |
|---|---|---|
.claude/目录存在 | ☐ | 已创建配置目录 |
CLAUDE.md文件存在 | ☐ | 项目规范已定义 |
settings.local.json配置 | ☐ | 本地配置已设置 |
.env文件配置 | ☐ | 环境变量已设置 |
.gitignore包含.claude/ | ☐ | 敏感配置已忽略 |
4.2 Skills配置
| 检查项 | 状态 | 说明 |
|---|---|---|
skills/目录存在 | ☐ | 技能目录已创建 |
| 至少创建2个Skills | ☐ | 组件生成 + API请求 |
| Skills包含完整描述 | ☐ | description和instruction |
| Skills可正常调用 | ☐ | 测试通过 |
4.3 MCP配置
| 检查项 | 状态 | 说明 |
|---|---|---|
| MCP服务器已配置 | ☐ | 至少1个服务器 |
| API密钥已设置 | ☐ | 环境变量正确 |
| MCP连接测试通过 | ☐ | 可查询外部数据 |
| 错误处理已配置 | ☐ | 失败时有降级方案 |
4.4 Commands配置
| 检查项 | 状态 | 说明 |
|---|---|---|
commands/目录存在 | ☐ | 命令目录已创建 |
| 至少创建2个Commands | ☐ | 代码审查 + 测试生成 |
| Commands包含allowed-tools | ☐ | 工具权限已设置 |
| Commands可正常执行 | ☐ | 测试通过 |
4.5 Hooks配置
| 检查项 | 状态 | 说明 |
|---|---|---|
hooks/目录存在 | ☐ | 钩子目录已创建 |
| pre-commit hook已配置 | ☐ | 提交前检查 |
| file-saved hook已配置 | ☐ | 自动格式化 |
| Hooks触发正常 | ☐ | 测试通过 |
4.6 Subagents配置
| 检查项 | 状态 | 说明 |
|---|---|---|
subagents/目录存在 | ☐ | 代理目录已创建 |
| 至少创建1个Subagent | ☐ | 专业代理已定义 |
| Subagent有明确职责 | ☐ | systemPrompt清晰 |
| Subagent可正常调用 | ☐ | 测试通过 |
4.7 Teams配置
| 检查项 | 状态 | 说明 |
|---|---|---|
teams/目录存在 | ☐ | 团队目录已创建 |
| 至少创建1个Team | ☐ | 协作团队已定义 |
| Team工作流已配置 | ☐ | workflow步骤清晰 |
| Team协作正常 | ☐ | 测试通过 |
五、常见问题排查
5.1 CLAUDE.md不生效
症状：Claude不遵循项目规范
排查步骤：
# 1. 检查文件位置
ls -la CLAUDE.md
# 2. 检查文件权限
cat CLAUDE.md
# 3. 检查文件格式
file CLAUDE.md
# 4. 重新加载Claude Code
# 退出并重新启动claude命令
bash
解决方案：
- 确保CLAUDE.md在项目根目录
- 检查文件编码为UTF-8
- 确保行尾符为LF（非CRLF）
5.2 Skills找不到
症状：/skill命令提示技能不存在
排查步骤：
# 1. 检查目录结构
tree .claude/skills
# 2. 检查文件名和格式
ls .claude/skills/*/skill.md
# 3. 检查skill.md格式
head -20 .claude/skills/my-skill/skill.md
bash
解决方案：
- 确保目录结构为
.claude/skills/<skill-name>/skill.md - skill.md必须包含
description字段 - 使用kebab-case命名技能目录
5.3 MCP服务器连接失败
症状：MCP服务器报错或无响应
排查步骤：
# 1. 检查settings.json格式
cat .claude/settings.local.json | jq .
# 2. 检查环境变量
echo $GITHUB_TOKEN
echo $BRAVE_API_KEY
# 3. 手动测试MCP服务器
npx -y @modelcontextprotocol/server-github
bash
常见错误与解决：
| 错误信息 | 原因 | 解决方案 |
|---|---|---|
command not found | npx不在PATH | 安装Node.js并添加到PATH |
API key invalid | 密钥错误或过期 | 重新生成API密钥 |
connection timeout | 网络问题 | 检查代理设置或更换网络 |
permission denied | 文件权限问题 | 使用chmod修改权限 |
5.4 Hooks不触发
症状：保存文件或提交代码时Hook没有执行
排查步骤：
# 1. 检查Hook文件格式
cat .claude/hooks/pre-commit.md
# 2. 检查trigger配置
grep -A 5 "trigger:" .claude/hooks/*.md
# 3. 查看Claude Code日志
# 在启动时注意Hook加载信息
bash
解决方案：
- 确保Hook文件包含正确的
trigger字段 - 检查事件名称拼写（如
pre-commit不是pre_commit） - 确认Hook文件在正确位置
5.5 Subagents响应异常
症状：Subagent回答不符合预期或报错
排查步骤：
# 1. 检查Subagent配置
cat .claude/subagents/my-agent.json
# 2. 验证JSON格式
cat .claude/subagents/my-agent.json | jq .
# 3. 测试调用
"@my-agent 你好"
bash
解决方案：
- 检查JSON格式是否正确
- 确保model名称有效
- systemPrompt应该清晰明确
5.6 Teams协作失败
症状：Team工作流卡住或成员无响应
排查步骤：
# 1. 检查Team配置
cat .claude/teams/my-team.json
# 2. 验证成员引用
grep "agentId" .claude/teams/my-team.json
# 3. 检查workflow步骤
grep "step" .claude/teams/my-team.json
bash
解决方案：
- 确保agentId与subagents目录中的文件名对应
- workflow步骤应该是连续的整数
- 每个步骤应该有明确的任务描述
六、进阶技巧
6.1 配置继承与覆盖
使用多层级配置实现灵活管理：
全局配置（用户目录）
└── ~/.claude/settings.json
↓
项目配置（项目目录）
└── .claude/settings.local.json
↓
环境配置（可选）
└── .claude/settings.{env}.json
text
6.2 配置片段化管理
将大型配置拆分为多个片段：
.claude/
├── settings.base.json # 基础配置
├── settings.mcp.json # MCP服务器
├── settings.skills.json # Skills配置
└── settings.local.json # 本地覆盖
text
6.3 动态配置加载
使用脚本动态生成配置：
#!/bin/bash
# gen-config.sh
# 根据当前分支生成不同配置
BRANCH=$(git branch --show-current)
if [ "$BRANCH" = "main" ]; then
cat settings.prod.json > settings.local.json
else
cat settings.dev.json > settings.local.json
fi
bash
6.4 配置版本管理
# .gitattributes
.claude/settings.local.json linguist-generated
.claude/settings.*.json diff=json
# .gitignore
.claude/settings.local.json
.claude/settings.*.local.json
bash
七、实战案例：端到端组件开发
让我们用完整的配置体系开发一个表单组件：
7.1 需求描述
开发一个支持以下功能的表单组件：
- 动态表单字段配置
- 表单验证
- 错误提示
- 提交状态管理
7.2 使用团队协作开发
# 启动团队
"@team frontend-development 开发DynamicForm组件"
bash
7.3 工作流程
[Step 1] @ui-designer
→ 设计表单布局
→ 定义颜色方案
→ 设计状态样式（loading/error/success）
[Step 2] @default
→ 实现表单逻辑
→ 集成验证库
→ 添加类型定义
[Step 3] @performance-expert
→ 审查渲染性能
→ 优化大表单场景
→ 建议虚拟滚动
[Step 4] @default
→ 编写单元测试
→ 生成使用文档
→ 创建示例代码
text
7.4 输出成果
# 生成的文件
src/components/DynamicForm.vue # 组件实现
src/types/IDynamicForm.ts # 类型定义
src/components/__tests__/DynamicForm.test.ts # 测试
docs/components/DynamicForm.md # 文档
examples/DynamicFormExample.vue # 示例
bash
7.5 验证结果
# 运行测试
pnpm test src/components/__tests__/DynamicForm.test.ts
# 检查类型
pnpm type-check
# 构建验证
pnpm build
bash
八、总结
通过本节的学习，我们已经：
- 建立了完整的配置体系：从基础的CLAUDE.md到高级的Teams协作
- 实现了模块化扩展：Skills提供复用能力，MCP连接外部世界
- 构建了自动化流程：Hooks让开发更高效
- 掌握了配置管理：灵活的配置切换和维护
- 学会了问题排查：系统化的调试方法
配置优先级建议
根据项目规模选择配置优先级：
| 项目规模 | 必须配置 | 推荐配置 | 可选配置 |
|---|---|---|---|
| 小型项目 | CLAUDE.md | 2-3个Skills | Commands |
| 中型项目 | CLAUDE.md + Skills | MCP + Commands | Hooks |
| 大型项目 | 全部基础配置 | Teams + Hooks | Subagents |
持续优化建议
- 定期审查配置：每月检查一次配置有效性
- 收集使用反馈：记录哪些配置最常用
- 优化Skills提示词：根据使用效果调整
- 更新MCP服务器：添加新的外部能力
- 分享最佳实践：在团队中传播经验
附录：快速配置模板
最小配置模板（5分钟快速开始）
# 1. 创建目录
mkdir -p .claude/skills/common
# 2. 创建CLAUDE.md
cat > CLAUDE.md << 'EOF'
# 项目规范
## 技术栈
- Vue 3.5+ / Vite 8.x / TypeScript 7.x
## 编码规范
- 组件使用PascalCase
- 函数使用camelCase
- 2空格缩进，单引号
EOF
# 3. 创建一个基础Skill
mkdir -p .claude/skills/component
cat > .claude/skills/component/skill.md << 'EOF'
---
description: 创建Vue3组件
---
创建一个符合项目规范的Vue3组件，使用<script setup>语法。
EOF
# 4. 完成！
echo "✅ Claude Code配置完成！"
bash
完整配置模板（生产环境）
参考本节第二部分的完整配置步骤，按需添加各个模块。
下一步：配置完成后，尝试用AI辅助开发一个完整的功能模块，体验完整的开发流程！
↑