CodeGeeX 可高效生成 Vue 3 语法糖组件，需用结构化提示词明确框架版本、setup 语法糖、响应式声明及完整 .vue 格式，避免回退 Options API。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

你需要在写 Vue 组件时跳过重复的

用结构化提示词生成完整 .vue 文件

第一步：在 CodeGeeX 输入框中键入完整指令，包含框架版本、语法糖、核心功能和输出格式约束。例如：

“请严格使用 Vue 3 的 <script setup> 语法糖格式输出一个商品搜索组件，要求：① 使用 ref 声明 searchKeyword；② 使用 onMounted 调用 mock API 获取初始商品列表；③ 模板中用 v-model 绑定输入框，用 v-for 渲染商品卡片；④ 输出为完整 .vue 文件格式，包含<template>、<script setup>、<style scoped> 三块，不使用 export default。”</script>

第二步：按下 Alt + C（Windows/Linux）或 Option + C（Mac）触发补全。

立即学习“前端免费学习笔记（深入）”；

第三步：检查生成结果是否含 defineProps、defineEmits 等 setup 语法糖关键字——若出现 export default 或 data() 函数，说明提示词未强制约束语法范式，需重试并加入“不使用 Options API”字样。

【必须显式声明“<script setup>”和“不使用 Options API”，否则模型默认回退到 Vue 2 风格】</script>

分模块生成再拼装（适合复杂组件）

当组件含表单校验、拖拽排序、权限控制等多层逻辑时，一次性生成易出错。应拆解为原子模块分别生成：

方法一：先生成响应式状态骨架

输入：“生成仅含 <script setup> 的空组件，定义 ref(‘’) 类型的 keyword、reactive([]) 类型的 productList、ref(false) 类型的 isLoading，返回这三项。”</script>

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

方法二：再生成异步获取逻辑

输入：“在此基础上添加 fetchProducts 函数：调用 axios.get(‘/api/products’)，成功后赋值给 productList 并设 isLoading = false，失败则 console.error。”

方法三：最后生成模板片段

输入：“仅生成 <template> 块：一个带 loading 状态的搜索框，一个 v-if=‘!isLoading’ 的商品列表，每个商品含 name 和 price 字段。”

拼装时注意：模板中绑定 ref 变量不能带 .value，例如 v-model="keyword" ✅，v-model="keyword.value" ❌——这是 Composition API 最常踩的坑。

基于已有代码续写（推荐日常高频使用）

你正在编辑一个已有.vue文件，想在 setup 函数末尾加 watch 监听或新增一个组合式函数？这才是 CodeGeeX 最自然的用法。

第一步：把当前文件中整个 <script setup> 块（包括 import 语句）完整复制到 CodeGeeX 输入框。

第二步：光标定位在 setup 函数最后一行的 } 之前，输入指令：“在此处添加一个 watch 监听 keyword 变化，当 keyword.length > 0 时调用 fetchProducts，否则清空 productList。”

第三步：确认生成代码是否正确引入了 watch —— 必须是 import { watch } from 'vue'，且调用形式为 watch(keyword, (newVal) => { ... })，不是 this.$watch。

这一步操作起来很简单，直接把光标放对位置就行。但若漏掉 import watch，后续编译会报错，所以生成后务必扫一眼顶部 import 行。