跳到技能内容
词映 AI导航
发现工具选型指南Skills 技能AI 快讯AI图片AI视频AI文档AI办公AI助手AI搜索AI编程AI音频AI设计AI智能体模型与开发AI学习模型评测AI提示词内容检测AI金融AI 3D扫描与识别其他工具跨境电商 AI
词映 AI导航
工具库Skills 技能
我的收藏
词映 AI导航
发现工具选型指南Skills 技能AI 快讯AI图片AI视频AI文档AI办公AI助手AI搜索AI编程AI音频AI设计AI智能体模型与开发AI学习模型评测AI提示词内容检测AI金融AI 3D扫描与识别其他工具跨境电商 AI
技能目录24 小时热门TOP100 技能每日更新
Skills 技能/TallMessiWu/personal-website/component-generator

Codex Vue 组件脚手架|生成带属性、事件和 Less 样式的文件

English

Codex 安装步骤

  1. 打开 GitHub 固定提交的 `.agents/skills/component-generator/SKILL.md`,核对内容与使用条件。
  2. 在自己的项目中创建 `.agents/skills/component-generator/`,把核对后的文件保存为 `.agents/skills/component-generator/SKILL.md`。
  3. 在该项目根目录启动 Codex,输入 `$component-generator` 并选择同名技能。

中文摘要

按来源项目的 Vue 3 约定设置组件名称、属性、事件与 scoped Less 的基础结构。适合创建可复用界面控件。

SKILL.md 中文导读

可复现示例

给下面的标签控件设计组件文件。
{"component":"LabelBadge","prop":"text:string","event":"remove","path":"src/components"}

工作步骤

  1. 确定 PascalCase 组件名和放置目录。
  2. 在 setup 中定义类型化属性和事件。
  3. 给模板放置语义样式类,并核对是否需要翻译键。

验收方法

规划 `src/components/LabelBadge.vue`,包含类型化 `text` 属性和 `remove` 事件,为组件设置有作用域的 Less 样式。

GitHub 原文 · 更新日期 2026-11-14

适用环境

用 Codex 打开支持 Vue 3、TypeScript 和 Less 的项目,提供组件用途、属性与事件契约。

常见问题

必须预先添加复杂的状态逻辑吗?

先按实际用途建立脚手架。额外状态按组件真正需要的行为再补。

技能信息

GitHub 仓库
TallMessiWu/personal-website

收集于互联网

相关指南

  • ChatGPT Skills 和 Codex Skills 有什么区别?
更多 Codex 技能
词映 AI 导航Skills 技能
工具分类全部工具已本地化技能选型指南AI 快讯