请使用Vue 3.4 Composition API，使用语法糖，组件需支持v-model双向绑定，不使用任何第三方UI库。<template><div class="user-card">{{ userName }}</div></template><script setup lang="ts">const userName = defineProps<{ userName: string }>().userName;</script>
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要kimi生成可直接运行的vue3组件代码，但每次输出都混用vue 2 options api写法、缺少<script setup>语法糖、响应式变量声明错误或缺失v-model绑定逻辑。</script>明确声明Vue版本与API风格
在提问第一句就写出“请使用Vue 3.4 Composition API”，不能只说“用Vue3”或“用最新版”。Vue 3.2、3.3、3.4对<script setup>支持程度不同，3.4已全面稳定支持defineModel、useId等新特性。</script>
紧接着补充关键约束：“使用<script setup>语法糖”“组件需支持v-model双向绑定”“不使用任何第三方UI库”。这三句能过滤掉80%的模板化错误输出。</script>
【必须写明“Composition API”而非“组合式API”】——Kimi内部术语映射中，“Composition API”是训练语料中的标准标识符，“组合式API”易被识别为中文泛称，触发宽松匹配逻辑，导致混用Options API。
提供最小可运行上下文
给出完整SFC结构示意，哪怕只有骨架。例如：
立即学习“前端免费学习笔记（深入）”；
<template><div class="user-card">{{ userName }}</div></template>
<script setup lang="ts">
const userName = defineProps<{ userName: string }>().userName;
</script>
这段代码明确传递了三个信号：单文件组件格式、TypeScript类型标注、props解构方式。Kimi会据此锁定代码生成范式，避免输出export default { data() { return { ... } } }这类Vue 2残留结构。
若组件需调用API，直接写“使用axios发起GET请求获取用户数据”，不要说“需要联网功能”——模糊描述会让Kimi自由发挥，大概率生成mock数据或空函数。
验证响应式与生命周期行为
方法一：在需求末尾追加验证指令
使用 Moonshot Kimi API 的 $web_search 内置工具进行联网搜索。当需要进行网络搜索获取实时信息时使用，支持中文和英文搜索查询。需要配置 MOONSHOT_API_KEY。
“请确保setup函数内使用ref或reactive声明响应式数据，并在onMounted中触发初始化加载。”这句话能强制Kimi检查响应式声明位置和钩子调用时机，避免把fetch写在return外面或漏掉onMounted。
方法二：要求显式写出依赖导入
“请在<script setup>顶部显式写出import语句，包括ref、onMounted、axios（如用到）”。Kimi有时会省略import，导致代码复制后报错，而显式声明能激活其完整性校验模块。
注意：不要写“记得引入xxx”，Kimi不识别“记得”类口语指令；必须用“请显式写出…”“必须包含…”等确定性动词。
嵌入ESLint与Volar兼容性提示
在提示词末尾添加一句：“代码需符合ESLint + @vue/eslint-config-typescript规则，禁用any类型，props必须有明确interface定义。”
这句会触发Kimi内部的前端工程规范子模型，自动规避defineProps({})无类型、ref
若项目启用Volar，再加一句：“使用Volar推荐的defineProps宏写法，即defineProps<{…}>()而非defineProps({…})”。两种写法在Volar中类型推导能力差异极大，后者无法正确提示props字段。
