Comate可在VSCode中快速生成功能完整的Vue 3页面组件，自动补全template/script/style、注入Pinia/路由等依赖，并支持基于自然语言四要素指令、已有组件扩写及Figma设计稿转码。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要在VSCode中快速生成一个功能完整的Vue 3页面组件，而不是从零手写template、script和style三部分，更不想反复调试props、emits或响应式逻辑。Comate能自动补全结构、注入依赖、集成Pinia和路由，且所有代码都基于当前项目上下文推导，不是通用模板。
新建空白文件后触发Comate对话框
在VSCode中右键→“新建文件”，命名为UserListPage.vue，光标置于文件第一行顶部，输入///后按回车键。
这一步必须在空白.vue文件顶部触发，【若光标不在首行或文件已含内容，Comate将降级为普通补全，无法启动页面级生成流程】。
用自然语言描述需求（四要素缺一不可）
在弹出的Comate对话框中，输入包含输入行为、响应时机、数据流向、交互反馈四要素的完整句子，例如：“生成一个Vue 3页面组件，展示用户列表，支持分页、搜索框实时过滤、点击每条记录跳转到/user/:id详情页，使用Pinia管理搜索关键词和分页参数”。
立即学习“前端免费学习笔记（深入）”；
避免说“做个用户列表页”——Comate无法推断是否需要防抖、是否走API还是mock、分页是前端计算还是后端返回。模糊指令会导致生成空div+console.log的无效代码。
等待生成并确认关键依赖已注入
2～4秒后，Comate输出完整单文件组件，含<script setup>、<template>、<style scoped>三块。</script>
立即检查<script setup>顶部：useRouter、useRoute、onMounted、definePage、useTaskStore等必须项已自动import，<strong>【无需手动补全import语句，Comate自动推导并注入】。</script>
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
若发现缺失useRouter或未调用router.push，说明项目未被识别为Vue项目——请确认工作区根目录存在package.json且含"vue"或"@vue/runtime-core"依赖。
从已有组件上下文扩写逻辑
方法一：打开项目中已存在的UserProfile.vue，滚动到需增强的位置，按Ctrl+Enter（Windows/Linux）或Cmd+Enter（Mac）触发补全。
方法二：选中一段现有代码（如一个el-form标签），右键→“Baidu Comate”→“扩写此逻辑”，AI会基于该片段风格续写校验规则、提交函数或API调用。
这一步不依赖你记住Axios配置细节，Comate通过扫描项目里已有的service/api模块自动匹配请求方式和拦截器逻辑。
用Figma设计稿直接生成Vue组件
第一步：在Figma中复制画布链接（确保已发布或设为可查看）。
第二步：打开Comate AI IDE，在顶部地址栏粘贴链接→点击“解析设计稿”→选择目标框架为Vue 3（Composition API）→点击“生成代码”。
第三步：AI自动识别按钮层级、卡片间距、标题字号，并映射为Tailwind类名或Element Plus组件标签；所有颜色值严格匹配项目tailwind.config.js中定义的色板。
截图法同样可用：Cmd+Shift+4截取当前画布→拖入Comate AI IDE右侧面板→等待识别完成→点击生成。该方式对未发布的设计稿更友好，但还原精度略低于链接解析。
