Agent skill

har-to-vue

将 HAR（HTTP Archive）文件转换为 Vue 源代码。支持批量转换网络请求为 Vue 组件、API 调用或页面数据结构，用于复刻网站或快速生成基于现有 API 的 Vue 应用。当 Claude 需要处理 HAR 文件以：（1）从浏览器抓包数据生成 Vue 代码，（2）批量转换多个请求为 API 服务，（3）复刻现有网站的 Vue 技术栈实现，（4）生成带有数据绑定的组件模板时使用。

View SKILL.md on GitHub Repository
Stars 3
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/Dwsy/agent/tree/main/skills/har-to-vue

SKILL.md

HAR to Vue 转换器

将 HAR 文件转换为 Vue 源代码，支持批量处理网络请求并生成可复用的 Vue 组件和 API 服务。

快速开始

基本转换

bash
# 转换单个 HAR 文件为 Vue 组件
bun scripts/har_to_vue.ts input.har -o output.vue

# 批量转换所有请求为 API 服务
bun scripts/har_to_vue.ts input.har --mode api -o services/

常用场景

复刻网站组件：

bash
bun scripts/har_to_vue.ts capture.har --mode component --template composition -o components/

生成 API 服务：

bash
bun scripts/har_to_vue.ts capture.har --mode api --library axios -o api/

完整页面生成：

bash
bun scripts/har_to_vue.ts capture.har --mode page -o pages/home/

转换模式

Component 模式

将 HAR 请求转换为 Vue 组件，包含数据绑定和模板结构。

生成内容：

  • 响应数据的响应式状态（ref/reactive）
  • 数据获取逻辑（onMounted/computed）
  • 基于 JSON 结构的模板

选项：

  • --template <composition|options>: 使用 Composition API 或 Options API
  • --typescript: 生成 TypeScript 类型定义
  • --with-props: 从请求参数生成 props 定义

API 模式

将 HAR 请求转换为 API 服务函数。

生成内容：

  • 每个请求对应的函数
  • TypeScript 类型定义
  • 请求/响应接口
  • 错误处理

选项：

  • --library <fetch|axios|ky>: HTTP 客户端库
  • --base-url: 注入基础 URL
  • --group-by <path|domain>: 分组策略

Page 模式

生成完整的 Vue 页面，包含布局、路由和状态管理。

生成内容：

  • 页面组件
  • 路由配置
  • API 服务文件
  • 类型定义
  • Store（Pinia/Vuex）集成

选项：

  • --with-router: 生成路由配置
  • --with-store: 生成状态管理
  • --layout <default|admin|blank>: 布局模板

HAR 解析规则

请求映射

HAR 字段 Vue 映射
request.method HTTP 方法（GET/POST/PUT/DELETE）
request.url API 端点路径
request.headers 请求头配置
request.postData 请求体（JSON/FormData）
response.content 响应数据结构

类型推断

  • 自动从 JSON 响应推断 TypeScript 接口
  • 数组项提取为独立类型
  • 枚举值生成为 union types
  • 可选字段标记为 ?

命名规范

  • URL 路径 → 函数名（/api/users → getUsers）
  • 驼峰转换（user_profile → UserProfile）
  • 移除重复前缀（getUserList → getList）

输出结构

Component 模式输出

UserList.vue
├── <script setup>
│   ├── imports（ref, onMounted, 等）
│   ├── types（接口定义）
│   ├── state（响应式数据）
│   ├── methods（数据获取）
│   └── lifecycle（onMounted）
├── <template>
│   └── 基于 JSON 结构的绑定
└── <style>
    └── 基础样式

API 模式输出

api/
├── index.ts          # 导出所有 API
├── types.ts          # 类型定义
├── users.ts          # 用户相关 API
├── products.ts       # 产品相关 API
└── utils.ts          # 请求工具（拦截器、错误处理）

Page 模式输出

pages/
└── dashboard/
    ├── index.vue     # 页面组件
    ├── api.ts        # API 服务
    ├── types.ts      # 类型定义
    ├── router.ts     # 路由配置
    └── store.ts      # 状态管理

高级功能

请求分组

按 URL 模式自动分组 API：

bash
# 按路径分组
bun scripts/har_to_vue.ts input.har --group-by path

# 按域名分组
bun scripts/har_to_vue.ts input.har --group-by domain

# 自定义分组规则
bun scripts/har_to_vue.ts input.har --group-config custom-rules.json

过滤请求

bash
# 仅包含特定域名
bun scripts/har_to_vue.ts input.har --filter-domain api.example.com

# 排除静态资源
bun scripts/har_to_vue.ts input.har --exclude-extensions css,js,png,jpg

# 仅包含特定方法
bun scripts/har_to_vue.ts input.har --methods GET,POST

模板定制

使用自定义模板文件：

bash
bun scripts/har_to_vue.ts input.har --template-file templates/custom.vue

模板变量：

  • {{ requests }}: 请求列表
  • {{ types }}: 类型定义
  • {{ imports }}: 导入语句
  • {{ componentName }}: 组件名称

配置文件

支持配置文件 har-to-vue.config.json：

json
{
  "mode": "component",
  "template": "composition",
  "typescript": true,
  "library": "axios",
  "output": "./src",
  "filter": {
    "includeDomains": ["api.example.com"],
    "excludeExtensions": ["css", "js", "png"]
  },
  "naming": {
    "style": "camelCase",
    "removePrefixes": ["get", "fetch"]
  }
}

最佳实践

1. 清理 HAR 文件

转换前清理不必要的请求：

  • 过滤静态资源（图片、CSS、JS）
  • 移除开发工具请求（hot reload、sourcemaps）
  • 保留业务相关 API

2. 类型优化

手动优化生成的类型：

  • 合并重复的类型定义
  • 提取通用接口
  • 添加适当的注释

3. 错误处理

添加统一的错误处理：

typescript
// utils.ts
export async function fetchWithErrorHandler(url: string) {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error(response.statusText);
    return await response.json();
  } catch (error) {
    console.error('API Error:', error);
    throw error;
  }
}

4. 环境变量

使用环境变量管理 API 配置：

typescript
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'https://api.example.com';

参考资料

  • HAR 格式规范
  • Vue 3 Composition API
  • TypeScript 类型推断
  • Axios 拦截器
  • 常见转换模式

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

Dwsy/agent

undo-redo

Use the undo_redo tool to rewind or reapply buffered file changes or inspect diffs without UI navigation. Use when you need to adjust or verify changes in the current session history.

3 0
Explore
Dwsy/agent

exa

使用 Exa.ai API 进行高质量的互联网搜索。需要 EXA_API_KEY 环境变量。

3 0
Explore
Dwsy/agent

backend-unit-test

后端单元测试技能。触发场景： - 用户要求运行/创建单元测试 - 用户要求验证数据 - 用户要求用 Maven 运行测试 - 关键词：test, maven test, junit, springboot test, 单元测试, 测试验证 核心：不改 pom，用 reactor 模式运行。

3 0
Explore
Dwsy/agent

mermaid-flow-image

将流程需求整理为可渲染的 Mermaid（简化版/详细版），并通过 Kroki 生成可发送的高分辨率 PNG 图片。适用于“把架构流程画出来并直接发图”的场景。

3 0
Explore
Dwsy/agent

web-browser

Allows to interact with web pages by performing actions such as clicking buttons, filling out forms, and navigating links. It works by remote controlling Google Chrome or Chromium browsers using the Chrome DevTools Protocol (CDP). When Claude needs to browse the web, it can use this skill to do so.

3 0
Explore
Dwsy/agent

ralph-loop-gen

任务管理系统模板生成器 - 根据用户输入或JSON配置生成完整的任务管理结构（模板生成器，非直接执行器）

3 0
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results