如果你想在 VSCode 中快速生成一个功能完善的 Vue 3 页面组件，而不是从头手写 template、script、style 三大部分，也不希望反复排查 props、emits 和响应式状态逻辑，那么 Comate 会更高效。它不仅能自动补全页面结构、注入所需依赖，还能集成 Pinia 与 Vue Router，并且生成结果会结合当前项目上下文进行推导，而非套用通用代码模板。

新建空白文件后触发Comate对话框

在 VSCode 中右键选择“新建文件”，命名为 UserListPage.vue，将光标放在文件第一行顶部，输入///后按回车。

这一步必须在空白的 .vue 文件顶部触发，【如果光标不在首行，或文件中已经存在内容，Comate 会降级为普通代码补全，无法进入页面级代码生成流程】。

用自然语言描述需求（四要素缺一不可）

在弹出的 Comate 对话框中，输入一段包含输入行为、响应时机、数据流向、交互反馈四个要素的完整描述，例如：“生成一个 Vue 3 页面组件，展示用户列表，支持分页、搜索框实时过滤、点击每条记录跳转到 /user/:id 详情页，使用 Pinia 管理搜索关键词和分页参数”。

不要只写“做个用户列表页”这类模糊指令——Comate 无法准确判断是否需要防抖、数据来源是 API 还是 mock、分页逻辑由前端处理还是后端返回。需求表达不清，往往会生成只有空 div 和 console.log 的低质量示例代码，无法直接用于实际 Vue 3 项目开发。

等待生成并确认关键依赖已注入

通常在 2～4 秒后，Comate 会输出完整的 Vue 单文件组件，包含