首页 › 龙虾技能列表 › vue-component-analyzer — vue-component-a...工具

vue-component-analyzer — vue-component-a...工具

v1.0.0

分析 Vue 前端项目的组件依赖关系，从入口文件开始递归分析所有组件，生成组件层级关系图。支持 Vue 2 和 Vue 3 项目，输出包含组件名称、文件路径和所需属性。使用当用户需要分析 Vue 组件结构、排查组件依赖关系或理解项目架构时。

0· 44·0 当前·0 累计
by @baozaibuding·MIT-0
下载技能包
License
MIT-0
最后更新
2026/4/7
安全扫描
VirusTotal
无害
查看报告
OpenClaw
安全
high confidence
The skill's requested actions and instructions match its stated purpose: it only describes reading and parsing a local Vue project to produce component dependency graphs and does not ask for unrelated credentials, installs, or network endpoints.
评估建议
This skill appears coherent and only needs access to your project files to work. Before installing or enabling it for autonomous runs: 1) be aware it will read source files in the project workspace — that can include any secrets embedded in code (API keys, tokens) so only run it in trusted repositories; 2) the implementation notes use regex-based parsing, which is brittle and may miss complex dynamic import patterns or TypeScript edge cases—expect some false negatives; 3) because it is instructi...
详细分析 ▾
✓ 用途与能力
The name/description (analyze Vue component dependency graph) align with the instructions and implementation notes (locate entry file, parse .vue files, extract imports/props, generate Markdown/JSON/Mermaid). No unrelated permissions, env vars, or binaries are requested.
✓ 指令范围
SKILL.md and implementation.md instruct the agent to read project files, parse templates/scripts/imports, and recurse through component imports. These file and path operations are appropriate and necessary for the stated task. The instructions do not direct the agent to read unrelated system files, environment variables, or send data to external endpoints.
✓ 安装机制
This is an instruction-only skill with no install spec and no external downloads; nothing is written to disk by an installer. That is proportionate for a static analysis helper.
✓ 凭证需求
No environment variables, credentials, or config paths are required. The skill works by reading project source files only, which is consistent with its purpose.
ℹ 持久化与权限
The skill does not request permanent inclusion (always:false). The default of allowing autonomous invocation is present but not unusual; note that autonomous invocation would let the agent run the file-reading/parsing behavior without manual prompts. This is expected for a code-analysis skill but worth considering in policy decisions.
安全有层次，运行前请审查代码。

License

MIT-0

可自由使用、修改和再分发，无需署名。

运行时依赖

无特殊依赖

版本

latestv1.0.02026/4/7

Initial release of vue-component-analyzer: - Recursively analyzes Vue 2 and Vue 3 component dependencies from the entry file. - Extracts component names, file paths, and props (name, type, required, default). - Supports both Options API and Composition API (including <script setup>). - Outputs results in Markdown tree, JSON, and Mermaid chart formats. - Ignores third-party library components; handles path aliases and circular dependencies. - Recognizes static and dynamic component imports and async components.

● 无害

安装命令 点击复制

官方npx clawhub@latest install vue-component-analyzer
镜像加速npx clawhub@latest install vue-component-analyzer --registry https://cn.clawhub-mirror.com

技能文档

# Vue 组件依赖分析器

功能概述

分析 Vue 项目的组件依赖关系，从入口文件(main.js/main.ts/App.vue)开始递归分析，生成完整的组件层级关系图。

支持特性

  • Vue 2 和 Vue 3 项目兼容
  • 支持 Options API 和 Composition API
  • 识别组件名称、文件路径、props 属性
  • 多种输出格式：Markdown 树形、JSON、Mermaid 图表

分析流程

  • 定位入口文件
- 查找 main.js / main.ts / app.js / app.ts - 定位根组件 App.vue
  • 递归分析组件
- 解析 <模板> 中的组件引用 - 提取 导入 语句中的组件依赖 - 识别 components 选项中注册的组件 - 递归分析子组件
  • 提取组件信息
- 组件名称（name 属性或文件名） - 组件文件绝对/相对路径 - Props 定义（名称、类型、是否必填、默认值）
  • 生成输出
- Markdown 树形结构 - JSON 结构化数据 - Mermaid 流程图

输出格式

1. Markdown 树形结构

`` 📦 App (src/App.vue) ├── 📁 components/ │ ├── 📄 Header (src/components/Header.vue) │ │ ├── props: title(String), showLogo(Boolean) │ │ └── 📄 UserAvatar (src/components/UserAvatar.vue) │ │ └── props: src(String), size(Number) │ └── 📄 Sidebar (src/components/Sidebar.vue) │ └── props: menuItems(Array), collapsed(Boolean) └── 📄 Footer (src/components/Footer.vue) └── props: copyright(String) `

2. JSON 格式

`json { "name": "App", "path": "src/App.vue", "props": [], "children": [ { "name": "Header", "path": "src/components/Header.vue", "props": [ { "name": "title", "type": "String", "required": true }, { "name": "showLogo", "type": "Boolean", "default": true } ], "children": [...] } ] } `

3. Mermaid 图表

`mermaid graph TD A[App
src/App.vue] --> B[Header
src/components/Header.vue] A --> C[Sidebar
src/components/Sidebar.vue] B --> D[UserAvatar
src/components/UserAvatar.vue] A --> E[Footer
src/components/Footer.vue] `

使用方法

分析当前 Vue 项目的组件结构：
  • 确定项目根目录
  • 查找入口文件和根组件
  • 递归分析所有组件依赖
  • 生成三种格式的分析报告

组件识别规则

Vue 2

  • 识别 components: { ComponentName } 选项
  • 解析 导入 ComponentName 从 './path'
  • 识别 <组件-name> 和 标签

Vue 3

  • 支持