如何使用CodeGeeX生成Vue代码

在Vue 3 Composition API开发中，若要快速生成符合规范、具备类型标注且可直接运行的.vue组件，关键在于合理运用CodeGeeX的结构化提示词。核心要点包括：使用

实际开发中，手动编写setup、ref、onMounted、defineProps等代码往往繁琐且容易出错——遗漏import语句或错误使用响应式调用方式，会导致控制台报错或模板无法更新，徒增耗时。

结构化提示词一次性生成完整组件

操作步骤十分简单：将带约束条件的中文指令直接粘贴至CodeGeeX的输入框即可。

在CodeGeeX输入框中键入以下完整指令（逐字复制，标点不可省略）：

“请严格使用 Vue 3 的

按下 Alt + C（Windows/Linux）或 Option + C（Mac）触发补全。生成后第一时间检查是否包含 defineProps、defineEmits、ref 等关键词——若出现 data() 或 export default，则说明提示词未锁定语法范式，需重新尝试，并在指令中添加“不使用 Options API”字样。

分模块生成再人工拼装

该方法特别适用于包含表单校验、异步提交、错误提示等多层逻辑的复杂组件。一次性生成容易导致 watch 逻辑缺失或 ref.value 错误地暴露在模板中，分模块生成可有效避免这些问题。

方法一：先刷出响应式状态骨架
输入：“生成仅含

方法二：再补上提交逻辑
输入：“在此基础上添加 handleSubmit 函数：阻止默认提交行为，设 isSubmitting = true → 调用 axios.post('/api/login', { username, password }) → 成功则重定向到 redirect 值（从 props 获取），失败则赋值 errorMsg 为响应错误信息，最后设 isSubmitting = false。”

方法三：最后生成模板
输入：“仅生成

拼装时需特别注意：模板中绑定 ref 变量必须直接写 username，不能写 username.value。这是 Composition API 最常踩的坑——添加 .value 会导致双向绑定失效，且控制台不报错，非常隐蔽。

基于已有代码续写新功能

若正在编辑一个已存在的 .vue 文件，需要添加防抖搜索、权限判断或 loading 状态等新功能，使用续写功能最为安全高效。

第一步：将当前文件中

第二步：光标置于 setup 函数末尾，即最后一行代码之后、 标签之前。

第三步：输入指令：“在此处添加一个 watch 监听 searchKeyword 变化，使用 lodash.debounce 包裹执行逻辑，延迟 300ms，当关键词长度 ≥ 2 时调用 fetchSuggestions 并传入关键词。”

第四步：生成后检查是否自动引入了 watch 和 debounce——若未引入，手动补上 import { watch } from 'vue' 和 import debounce from 'lodash/debounce'。