Vue组件生成(免费版)

Vue 组件生成工具(免费版)

概述

vue-component-gen-tool-free 为个人开发者提供 Vue 3 单文件组件模板的快速生成能力。它支持 Composition API、Options API、`

...

### 场景 2:生成表单输入组件

生成一个 InputField 组件,带 v-model 支持,使用 TypeScript

```vue

  
    {{ label }}
    
  

# ...

# ...

场景 3:生成模态框组件

生成一个 Modal 组件,带 v-model:open 支持,使用 SCSS

  
    
      
        
          
            {{ title }}
            ×
          
          
            
          
          
            
          
        
      
    
  

# ...

# ...

快速开始

第一步:描述组件需求

直接在对话中描述你需要的组件,例如:

生成一个 UserCard 组件,显示头像、姓名和邮箱,用 Composition API 和 TypeScript.

第二步:获取组件代码

工具会输出完整的 .vue 文件,包含 template、script、style 三部分.

第三步:应用到项目

# 将代码保存为组件文件
# src/components/UserCard.vue
# ...
# 在父组件中使用
# 

示例

CLI 风格命令

支持的 API 类型对照

最佳实践

1. 优先使用 ``:Vue 3 推荐语法,TypeScript 提供类型安全.
2. Props 用类型接口定义:interface Props { ... } 比 defineProps({ ... }) 更清晰.
3. Emits 用类型化签名:defineEmits<{ (e: 'click', id: string): void }>() 保证类型安全.
4. withDefaults 处理默认值:TypeScript 模式下用 withDefaults 设置 Props 默认值.
5. 样式用 scoped:避免样式泄漏到全局,影响其他组件.
6. v-model 用 update:modelValue:Vue 3 的标准 v-model 协议.
7. 组件文件名用 PascalCase:UserCard.vue 而非 user-card.vue,与组件名一致.
8. Props 用 defineProps 宏:编译期宏,无需导入,类型推断更准确.

常见问题

Q1: Composition API 和 Options API 怎么选?

新项目优先 Composition API,逻辑复用更灵活,TypeScript 支持更好。旧项目兼容或简单组件可用 Options API.

Q2: `` 和普通 setup() 函数怎么选?

优先 ``,语法更简洁,编译期优化更好。仅在需要动态渲染函数或额外配置时用普通 setup().

Q3: TypeScript 模式下如何定义 Props 默认值?

用 withDefaults(defineProps(), { label: 'Click me' })。withDefaults 是编译期宏,提供类型安全的默认值.

Q4: 如何实现 v-model 双向绑定?

Props 定义 modelValue,Emits 定义 update:modelValue。在输入事件中触发 emit('update:modelValue', newValue).

Q5: 免费版与 Pro 版的区别?

免费版支持单组件生成与基础 API 类型;Pro 版扩展企业级组件库结构、批量生成、可访问性增强、单元测试模板与 CI 集成.

依赖说明

运行环境

• Agent 平台:支持 SKILL.md 的任意 AI Agent(Claude Code / Cursor / Codex / Gemini CLI 等)
• 操作系统:Windows / macOS / Linux
• Node.js:建议 18+(用于 Vue 项目运行)
• Vue:建议 3.3+(完整支持 `` 与 TypeScript)

依赖详情

API Key 配置

• 基础LLM由Agent平台内置提供，Skill基于Markdown指令驱动
• 组件代码完全本地生成,不涉及任何外部 API

可用性分类

• 分类: MD+EXEC(纯 Markdown 指令,部分功能需要 exec 命令行执行能力)
• 说明: 基于自然语言指令驱动 Agent 输出 Vue 单文件组件代码;用户将代码保存到项目并通过 Vite 或 Vue CLI 运行

错误处理

已知限制

• 当前为免费版本,如需完整功能请升级到付费版获取全部能力

输出格式

{
  "success": true,
  "data": {
    "result": "Vue组件生成(免费版)处理结果",
    "execution_time": "0.5s",
    "metadata": {
      "version": "1.0",
      "processor": "vue component gen"
    }
  },
  "execution_log": ["解析输入参数", "执行核心处理", "格式化输出结果"],
  "error": null
}