CodeBuddy 可快速生成符合 Vue 3 规范的页面组件，需准确指定路由路径与组件命名，通过 CLI、VS Code 插件或 Figma 导入三种方式创建 src/views/ 下的页面，并自动注册路由、注入响应式 API。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要用 CodeBuddy 快速生成符合 Vue 3 规范的页面组件，而不是手动写 <template>、<script setup> 和 <style> 三块结构，关键在于让工具准确理解页面语义和路由上下文——漏掉路由路径或组件命名不规范，生成的文件可能被放进错误目录，甚至无法被 Vue Router 自动识别。
通过 CLI 指令生成页面组件
打开终端，进入项目根目录，确保已安装 @codebuddy/cli 并完成 Vue 3 初始化配置。
执行命令：codebuddy generate page TodoPage --route /todo --with-layout。
该指令会自动创建 src/views/TodoPage.vue，并同步在 src/router/index.ts 中注册路由项：{ path: '/todo', component: () => import('@/views/TodoPage.vue') }。
立即学习“前端免费学习笔记（深入）”；
【/todo 路径必须与实际前端路由完全一致，大小写、斜杠方向都不能错，否则生成的组件无法被访问】
生成后检查 src/views/TodoPage.vue 是否包含 defineOptions({ name: 'TodoPage' }) ——这是 Vue 3 官方推荐的组件显式命名方式，缺失会导致 DevTools 中组件名显示为 AnonymousComponent。
在 VS Code 中用自然语言生成页面
方法一：右键触发
在 Explorer 中右键点击 src/views 文件夹 → 选择 Tencent Cloud CodeBuddy > Generate Page → 输入提示：“首页，含欢迎标题、任务统计卡片、最近三项待办列表，使用 Pinia 管理状态”。
方法二：编辑器内聚焦生成
打开任意 .vue 文件，在空白处按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS），输入 “CodeBuddy: Generate Page”，回车后直接描述需求。
生成过程依赖当前打开文件的目录层级：若当前打开的是 src/components/xxx.vue，AI 默认将新页面建在 src/components/ 下，需手动确认路径是否应为 src/views/。
从 Figma 原型图反向生成 Vue 页面
第一步：在 Figma 中选中整个页面画板（Artboard），右键 → “Set as Page Root”。这一步告诉 CodeBuddy 这是一个独立路由页面，而非组件片段。
第二步：为关键区域添加语义化图层名，例如：header-welcome-text、stat-card-total、list-recent-todos。图层名中出现 -page 或 -view 后缀时，CodeBuddy 会优先生成 views/ 下的页面组件。
第三步：在 CodeBuddy 插件面板中点击 “Import from Figma”，粘贴设计稿链接，勾选 “Generate as Page Component”，点击导入。
第四步：确认生成目标路径为 src/views/，而非 src/components/；若默认路径错误，立即点击“Edit Path”修改，【路径一旦确认提交就不可撤回，错误路径会导致路由跳转 404】。
生成完成后，VS Code 会自动打开新页面文件，其中 <template> 结构严格对应 Figma 图层嵌套顺序，script setup 已注入 useRoute() 和 useRouter() 引用。
