Vue Component Generator

生成 Vue 3 组件模板，支持 Composition API、Options API、TypeScript、SFC 单文件组件，一键生成完整 Vue 组件代码。

Security Scan

The documentation claims a full-featured CLI with many options, but the included code is a minimal script that only creates a simple .vue file and does not implement the advertised features.

Purpose & Capability

The SKILL.md advertises many features (Composition/Options API, TypeScript, script-setup, SCSS, --api/--typescript/--output flags, multiple component types). The provided artifact (vue-component-generator.sh) only accepts an optional first positional name and writes a basic template by replacing a placeholder; it does not parse flags, support TypeScript/SCSS generation, or respect an output directory. This is a clear mismatch between declared capabilities and actual code.

Instruction Scope

Instructions show CLI usage examples that imply support for multiple flags and output control, but runtime behavior (the shell script) only uses the first argument as a component name and writes a file in the current directory. The instructions do not request credentials or access to unrelated files; generated files will be written to the current working directory. Also note sed -i is used (may behave differently on macOS), which is a portability issue but not a security concern.

Install Mechanism

No install spec is provided (instruction-only with an included shell script). No external downloads or package installs are declared. This minimizes install-time risk.

Credentials

No environment variables, credentials, or config paths are required or requested. The skill does not attempt to access unrelated secrets or system configuration.

Persistence & Privilege

The skill is not always-included and has no special persistence or system-wide configuration changes. It does not modify other skills or agent settings.

What to consider before installing

This skill's documentation promises a multi-feature CLI but the included script only creates a very simple .vue file from a placeholder name. If you intend to use it, inspect or run the script in a safe directory first; it will write files to the current working directory. Do not expect support for flags like --api, --typescript, or --output unless you install or author a fuller implementation. If you need the advertised features, ask the author for the real CLI implementation or extend the script yourself. Because the discrepancy is significant, treat this skill as untrusted until its claimed features are actually implemented.

快速生成专业的 Vue 3 组件代码。

功能

• ⚡ 一键生成组件
• 📝 支持 TypeScript
• 🎯 Composition API / Options API
• 🎨 SCSS 样式支持
• 📖 Props/Emits 定义

支持的 API

API	说明
composition	Composition API (推荐)
options	Options API
script-setup	<script setup> 语法

组件类型

• 普通组件
• 路由组件
• 布局组件
• 表单组件

使用方法

基本用法

# 生成 Composition API 组件
vue-component-generator MyButton --api composition

# 生成 Options API 组件
vue-component-generator MyModal --api options

# 生成 TypeScript 组件
vue-component-generator MyForm --typescript

选项

选项	说明
--api, -a	API 类型 (composition/options)
--typescript, -t	启用 TypeScript
--scss, -s	启用 SCSS
--output, -o	输出目录

输出示例

<template>
  <div class="my-button">
    <button @click="handleClick">
      {{ label }}
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  label: {
    type: String,
    default: 'Click me'
  }
})

const emit = defineEmits(['click'])

const handleClick = () => {
  emit('click')
}
</script>

<style scoped>
.my-button {
  padding: 10px 20px;
}
</style>

安装

# 无需额外依赖

变现思路

1. 组件库模板 - 销售专业组件库模板
2. 企业服务 - 定制 Vue 组件
3. 培训 - Vue 开发培训

更多示例

表单组件

vue-component-generator InputField --api composition --typescript

模态框

vue-component-generator Modal --api composition --scss