Vue 组件生成器

填写组件名，选择 API 风格（组合式 <script setup> / 选项式 Options API）与语言（JavaScript / TypeScript），配置 props、emits、slot 与样式选项，一键生成标准 Vue 单文件组件（SFC）模板代码。全部在浏览器本地生成，不发起任何网络请求。

组件选项等待生成

组件名

API 风格

语言

props（名称:类型，逗号分隔）

包含 emits（change）包含默认 slot 包含 <style> 块样式 scoped

props 支持 String / Number / Boolean / Array / Object / Function / Date 等类型，未写类型默认为 String。

生成结果

文件名：—

填写组件名与属性，点击「生成组件」，Vue 单文件组件代码将显示在这里。

生成的组件可直接保存为 .vue 单文件组件。

使用说明

组件名会自动规范化为 PascalCase（如 base-card → BaseCard）。
组合式 API 使用 <script setup>，通过 defineProps / defineEmits 声明。
选择 TypeScript 时会为 props 生成 interface Props 类型定义。
选项式 API 使用 export default {}，props 以对象形式声明类型与默认值。
勾选「样式 scoped」会在 <style> 上加 scoped，仅当启用样式块时可用。
emit 会生成 change 事件示例，slot 会生成默认插槽 <slot />。
全部内容在浏览器本地生成，不上传也不采集任何数据。