Vue2 开发专家 (fe-vue2)

适用人群

适合：要把落地页、演示页或静态页面快速上线的人、要先拿到一个可访问链接给团队预览或验收的人、要频繁发布小页面、测试页或活动页的人。

技能介绍

专家级 Vue2 开发规范，专注于 Options API 最佳实践、高性能组件生成及 DDD 架构设计。遵循 plugin:vue/strongly-recommended 规范。

本 Skill 专注于生成高质量、可维护的 Vue2 组件，深度整合了 Options API 最佳实践与严谨的代码质量控制。

业务背景和落地案例

当团队需要页面发布时，可以先用Vue2 开发专家 (fe-vue2)完成第一轮处理。常见做法是把相关文件、网址、素材或配置交给它，先产出初版结果，再由人工确认和继续推进。

能做什么

• 基础规范: 严格遵循 plugin:vue/strongly-recommended。
• 组件模式: 使用 Options API (data, methods, computed, watch)。
• 数据流: 严格遵守单向数据流，禁止在子组件中修改 Props。
• 命名规范: 所有 Class 必须使用 wps- 前缀，组件名始终使用多单词命名。
• 质量控制: 单个文件 < 300 行，单个函数 < 50 行，圈复杂度 < 10。

安装方法

方式 1：对 OpenClaw 说（不用写代码）

适合：OpenClaw、Codex、Kimiclaw、Windsurf、Trae、华为 CodeArts。

直接对 OpenClaw 说：

帮我安装一个叫 Vue2 开发专家 (fe-vue2) 的 Skill。
如果安装时需要精确名字，就用 agent-skills-fe-vue2。
装好以后，先用它帮我处理一遍当前任务。

如果需要手动安装，可以用这条命令：

clawhub install agent-skills-fe-vue2

方式 2：导入 MD 安装

适合：腾讯Workbuddy、百度Duclaw、字节Arkclaw、智谱Autoclaw、科大讯飞Astronclaw。

1. 找到这条 Skill 自带的 Markdown 文件，通常就是它的 SKILL.md 或同名 .md 文件。
2. 把这个 Markdown 文件导入到你的产品里。
3. 导入完成后，直接对 AI 说：

用刚刚导入的Vue2 开发专家 (fe-vue2)，先帮我处理当前任务。

备注：这一种本质上是导入一个 Markdown 文件，给知道安装包里有 .md 文件的人即可。

方式 3：代码安装

适合：Claude Code、Cursor、通义灵码、文心快码。

这条 Skill 没有整理出稳定的命令行安装写法，建议优先用方式 1 或方式 2。

使用步骤

1. 先选上面 3 种方式里，自己最容易完成的一种。
2. 安装完成后，直接对 OpenClaw 说：“用Vue2 开发专家 (fe-vue2)帮我处理当前任务。” 先让它自己跑一遍就可以。
3. 如果你已经有明确文件、网址、目录或数据，再把它补给 OpenClaw，让它只处理这一部分。
4. 先看第一轮结果，再决定要不要追加条件、缩小范围或继续执行下一步。
5. 如果这条 Skill 确实好用，就把它保留在常用列表，后面重复任务直接复用。

你需要准备什么

• 与你当前任务相关的文件、网址、目录或数据。
• 要发布的 HTML、CSS、JS 或页面文件。
• 页面标题、路径或上线要求。
• 如果有环境限制，也可以提前说明。
• 如果这条 Skill 依赖外部服务，还要准备对应账号权限或可用凭证。

你会看到什么结果

• 可访问的页面地址。
• 上线后的页面结果。
• 后续可继续迭代的发布结果。

风险提示

• 涉及 API Key、Token 或其他凭证时，先确认保存方式和权限边界。
• 如果会修改外部系统、本地文件或线上环境，建议先在测试环境跑最小流程。
• 依赖外部服务时，网络波动、配额限制或接口变化都会影响结果。
• 自动化页面流程容易受页面结构变化影响，正式使用前先跑一遍最小示例。

来源信息

• 公开页面地址: https://agentskillsrepo.com/skill/htner/agent-skills-fe-vue2
• SKILL.md 下载地址: https://agentskillsrepo.com/skill/htner/agent-skills-fe-vue2/download