Qoder生成可直接运行的Vue代码需提供技术栈、页面功能和结构约束三要素：声明Composition API+Pinia+Vue Router 4角色；描述用户列表页搜索、表格、分页、弹窗功能；指定文件路径与依赖要求。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要用Qoder生成符合项目规范、可直接运行的Vue代码，必须提供明确的技术栈、页面功能和结构约束，否则AI会按默认模板填充，导致组件缺失、状态管理未注入或路由未注册。
基础提示词必须包含三项核心要素
第一步：声明角色与目标。输入“你是一个资深 Vue3 开发专家，使用 Composition API + Pinia + Vue Router 4 构建企业级管理后台”。【不写这句，Qoder 默认用 Options API 且不启用 Pinia】
第二步：描述具体页面功能。例如：“生成用户列表页，含顶部搜索栏（支持姓名/邮箱模糊查）、表格展示（列：ID、姓名、部门、状态开关、操作按钮）、分页器（每页10条）、新增弹窗（表单含姓名、邮箱、角色下拉）。”
第三步：指定文件输出路径与依赖要求。“所有代码生成在 src/views/UserList.vue，API 调用封装在 src/api/user.ts，状态管理逻辑写入 src/stores/user.ts，路由配置添加到 src/router/index.ts 的 children 数组中。”
立即学习“前端免费学习笔记（深入）”；
进阶提示词提升生成质量
方法一：绑定框架能力约束
在对话框中追加指令：“启用 Frontend Skill 预置能力，强制使用 defineOptions 定义组件选项，props 使用 withDefaults 包裹，默认开启 defineExpose 暴露子组件方法。”
方法二：规避常见错误
加入硬性规则：“禁止使用 any 类型；所有接口响应必须用泛型 Promise
方法三：对接已有工程结构
若项目已存在 src/composables 目录，提示词需写明：“复用 src/composables/useTable.ts 中的分页逻辑，不要重复定义；新增的 API 请求函数必须继承 src/composables/useRequest.ts 中的 request 实例。”
不同场景下的提示词组合策略
① 快速原型验证：只写“用 Vue3 + Vite 生成一个带登录表单的首页，表单字段为用户名、密码，提交后跳转 /dashboard，页面背景色设为 #f5f5f5”。这一步操作起来很简单，Qoder 会自动生成 App.vue 和 router 配置，无需额外干预。
② 企业级模块交付：必须叠加上下文锚定。“当前项目已使用 Element Plus 2.3.0，所有组件必须用 el- 前缀；图标统一从 @element-plus/icons-vue 导入；表格列宽度按设计稿固定为：ID列80px、姓名列160px、状态列120px。”
③ 设计稿还原任务：前置动作是获取 Figma 页面链接。“请严格按 Figma 链接 https://www.figma.com/file/xxx?node-id=123-456 内容生成 Vue 页面，所有间距、字体大小、颜色值（如 #409EFF）必须逐像素还原，图片资源自动下载至 src/assets/images/ 并用 require 引入。”【未提供 node-id 的 Figma 链接将导致 Qoder 无法定位具体画板】
