Codex Vue 组件脚手架|生成带属性、事件和 Less 样式的文件
EnglishCodex 安装步骤
- 打开 GitHub 固定提交的 `.agents/skills/component-generator/SKILL.md`,核对内容与使用条件。
- 在自己的项目中创建 `.agents/skills/component-generator/`,把核对后的文件保存为 `.agents/skills/component-generator/SKILL.md`。
- 在该项目根目录启动 Codex,输入 `$component-generator` 并选择同名技能。
中文摘要
按来源项目的 Vue 3 约定设置组件名称、属性、事件与 scoped Less 的基础结构。适合创建可复用界面控件。
SKILL.md 中文导读
可复现示例
给下面的标签控件设计组件文件。
{"component":"LabelBadge","prop":"text:string","event":"remove","path":"src/components"}工作步骤
- 确定 PascalCase 组件名和放置目录。
- 在 setup 中定义类型化属性和事件。
- 给模板放置语义样式类,并核对是否需要翻译键。
验收方法
规划 `src/components/LabelBadge.vue`,包含类型化 `text` 属性和 `remove` 事件,为组件设置有作用域的 Less 样式。
GitHub 原文 · 更新日期
适用环境
用 Codex 打开支持 Vue 3、TypeScript 和 Less 的项目,提供组件用途、属性与事件契约。
常见问题
必须预先添加复杂的状态逻辑吗?
先按实际用途建立脚手架。额外状态按组件真正需要的行为再补。