---
slug: "vue-component-gen-tool-pro"
name: "vue-component-gen-tool-pro"
version: "1.0.0"
displayName: "Vue组件生成(专业版)"
summary: "面向团队的企业级Vue 3组件工程平台,含组件库结构、批量生成、可访问性、测试模板与CI集成。。Vue组件生成工具专业版为团队与企业提供端到端Vue 3组件工程能力,涵盖企业级组件库结构、批"
license: "Proprietary"
edition: "pro"
description: |-
Vue组件生成工具专业版为团队与企业提供端到端Vue 3组件工程能力,涵盖企业级组件库结构、批量组件生成、WCAG AA可访问性、单元测试模板与CI/CD集成。核心能力:
- 企业级组件库目录结构与文档
- 批量组件生成脚手架
- WCAG AA可访问性内建
- 单元测试模板(Vitest + Vue Test Utils)
- 多API类型同步输出(Composition/Options)
- 设计令牌驱动的样式
- CI/CD组件质量门禁
适用场景:
- 中大型团队Vue组件库从0到1搭建
- 企业级产...
tags:
- Vue
- 组件库
- 企业开发
- 可访问性
- 自动化测试
- 团队协作
- CI/CD
- 工具
- 效率
- 自动化
- 开发
- 代码
- 创意
- 图像
- 知识
- comp
- vue
- disabled
- pro
tools:
- read
- exec
- write
homepage: ""
category: "Automation"
---
# Vue 组件生成工具(专业版)
## 概述
`vue-component-gen-tool-pro` 是面向团队与企业的 Vue 3 组件工程平台。它在免费版单组件生成之上,扩展了企业级组件库结构、批量组件脚手架、WCAG AA 可访问性内建、单元测试模板与 CI/CD 质量门禁能力,帮助团队构建可复用、可测试、可访问的 Vue 组件体系.
本版本完全兼容免费版输出的所有单文件组件代码,可平滑升级。所有指令通过 Markdown 驱动 Agent,配套脚本用于批量生成与 CI 集成.
## 核心能力
| 能力 | 说明 | 是否兼容免费版 |
|---|---|-------|
| 单组件生成 | 免费版全部 Composition/Options/TS/SCSS 能力 | 完全兼容 |
| 企业组件库结构 | 目录、文档、版本管理、barrel 导出 | Pro 新增 |
| 批量组件生成 | 脚手架脚本一次性生成整套组件 | Pro 新增 |
| WCAG AA 可访问性 | 默认合规,键盘/屏幕阅读器/对比度 | Pro 新增 |
| 单元测试模板 | Vitest + Vue Test Utils 标准模板 | Pro 新增 |
| 设计令牌驱动 | 令牌化样式,支持暗色模式 | Pro 新增 |
| 多 API 类型输出 | Composition 与 Options 同步输出 | Pro 新增 |
| CI 质量门禁 | 类型检查、测试、可访问性、视觉回归 | Pro 新增 |
### 核心功能执行
用`input_params`参数进行配置.
**输入**: 用户提供核心功能执行所需的指令和必要参数.
**处理**: 解析核心功能执行的输入参数,完成核心逻辑,返回结构化响应.
**输出**: 返回核心功能执行的响应数据,包含状态码、结果和日志.
- 执行此能力时使用`input_params`参数,支持创建/查询/导出操作
### 参数配置与调用
用`config_options`参数进行配置.
**输入**: 用户提供参数配置与调用所需的指令和必要参数.
**处理**: 解析参数配置与调用的输入参数,完成核心逻辑,返回结构化响应.
**输出**: 返回参数配置与调用的响应数据,包含状态码、结果和日志.
- 执行此能力时使用`config_options`参数,支持修改/重置/导入操作
### 结果处理与输出
用`output_format`参数进行配置.
**输入**: 用户提供结果处理与输出所需的指令和必要参数.
**处理**: 解析结果处理与输出的输入参数,完成核心逻辑,返回结构化响应.
**输出**: 返回结果处理与输出的响应数据,包含状态码、结果和日志.
- 执行此能力时使用`output_format`参数,支持导出/保存/转换操作
**能力覆盖范围**：本skill的核心能力覆盖以下场景关键词：面向团队的企业级、组件工程平台、含组件库结构、批量生成、测试模板与、组件生成工具专业、版为团队与企业提、供端到端、组件工程能力、涵盖企业级组件库、单元测试模板与、核心能力、企业级组件库目录、结构与文档、批量组件生成脚手、可访问性内建、类型同步输出、设计令牌驱动的样、组件质量门禁等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持.
## 使用场景
### 场景 1:企业组件库结构搭建
为团队生成完整的 Vue 组件库目录结构.
```
src/
├── components/ # 组件实现
│ ├── Button/
│ │ ├── Button.vue # 组件实现
│ │ ├── Button.test.ts # 单元测试
│ │ ├── Button.stories.ts # Storybook 故事
│ │ ├── types.ts # 类型定义
│ │ └── README.md # 组件文档
│ ├── Input/
│ │ └── ...
│ └── ...
├── composables/ # 组合式函数
│ ├── useTheme.ts
│ └── useA11y.ts
├── tokens/ # 设计令牌
│ ├── colors.scss
│ ├── typography.scss
│ └── index.scss
├── utils/ # 工具函数
│ ├── a11y.ts
│ └── cn.ts
└── index.ts # barrel 导出
```
### 场景 2:批量组件生成脚本
生成一个脚手架脚本,一次性创建整套组件骨架.
```bash
#!/usr/bin/env bash
# （请参考skill目录中的脚本文件） — 批量生成 Vue 组件
set -euo pipefail
# ...
COMPONENTS=(
"Button" "Input" "Select" "Checkbox" "Radio"
"Table" "Pagination" "Tag" "Badge"
"Card" "Modal" "Drawer" "Tooltip"
"Navbar" "Sidebar" "Breadcrumb"
)
# ...
BASE_DIR="src/components"
# ...
for comp in "${COMPONENTS[@]}"; do
dir="$BASE_DIR/$comp"
mkdir -p "$dir"
comp_kebab=$(echo "$comp" | sed 's/\([A-Z]\)/-\1/g' | tr '[:upper:]' '[:lower:]' | sed 's/^-//')
# ...
# 组件实现(
# ...
EOF
# ...
# 类型定义
cat > "$dir/types.ts" < "$dir/$comp.test.ts" < {
it('应正确渲染默认 slot', () => {
const wrapper = mount(${comp}, {
slots: { default: '内容' }
})
expect(wrapper.text()).toContain('内容')
})
# ...
it('disabled 时应设置 aria-disabled', () => {
const wrapper = mount(${comp}, {
props: { disabled: true }
})
expect(wrapper.attributes('aria-disabled')).toBe('true')
expect(wrapper.attributes('tabindex')).toBe('-1')
})
# ...
it('键盘应可聚焦', async () => {
const wrapper = mount(${comp})
expect(wrapper.attributes('tabindex')).toBe('0')
})
})
EOF
# ...
# 文档
cat > "$dir/README.md" <
<${comp}>内容
# ...
\`\`\`
# ...
## Props
# ...
| 属性 | 类型 | 默认值 | 说明 |
|:-----|:-----|:-----|:-----|
| tag | string | 'div' | 渲染的 HTML 标签 |
| disabled | boolean | false | 是否禁用 |
# ...
## 可访问性
# ...
- 默认支持键盘聚焦(tabindex)
- disabled 状态使用 aria-disabled
- focus-visible 提供可见焦点样式
- 对比度符合 WCAG AA
# ...
## 测试
# ...
\`\`\`bash
npx vitest run src/components/${comp}
\`\`\`
EOF
# ...
done
# ...
# barrel 导出
{
echo "// 自动生成的 barrel 导出"
for comp in "${COMPONENTS[@]}"; do
echo "export { default as ${comp} } from './${comp}/${comp}.vue'"
echo "export type { ${comp}Props } from './${comp}/types'"
done
} > "$BASE_DIR/index.ts"
# ...
echo "已生成 ${#COMPONENTS[@]} 个组件于 $BASE_DIR/"
```
### 场景 3:可访问性增强组件模板
生成默认符合 WCAG AA 的组件,内置键盘与屏幕阅读器支持.
```vue
# ...
# ...
```
## 快速开始
### 第一步:声明团队上下文
在对话中说明团队规模、技术栈与组件库目标,例如:
```
我们是 12 人的前端团队,技术栈是 Vue 3 + TypeScript + Vite,
需要从 0 搭建企业组件库,要求 WCAG AA 合规,含单元测试,
支持暗色模式,并集成到 CI.
```
### 第二步:获取工程方案
工具会输出组件库目录结构、批量生成脚本、可访问性模板、测试模板与 CI 配置.
### 第三步:落地与维护
```bash
# 应用设计令牌
cp tokens.scss src/styles/
# ...
# 批量生成组件骨架
bash （请参考skill目录中的脚本文件）
# ...
# 运行单元测试
npx vitest run
# ...
# 启动 Storybook 文档
npm run storybook
```
---
## 示例
### CI/CD 组件质量门禁
```yaml
# .github/workflows/component-quality.yml
## 快速开始
1. 确认运行环境满足依赖说明中的要求
2. 在AI Agent对话中调用本技能,提供必要的输入参数
3. 检查输出结果,根据需要进行后续处理
> 详细的输入输出格式请参考下方章节说明。
name: Vue Component Quality Gate
on:
pull_request:
branches: [main]
paths: ['src/components/**']
# ...
jobs:
quality:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- run: npm ci
# ...
- name: 类型检查
run: npx vue-tsc --noEmit
# ...
- name: 单元测试
run: npx vitest run --coverage
# ...
- name: 可访问性检查
run: npx vitest run --testNamePattern="可访问性"
# ...
- name: ESLint 检查
run: npx eslint src/components --max-warnings=0
# ...
- name: 构建
run: npm run build
# ...
- name: 上传覆盖率
uses: codecov/codecov-action@v4
```
## 最佳实践
1. **`