comp-hub 组件脚手架

基于 docs.comphub.cn 官方规范，快速生成符合 comp-hub 发布标准的业务组件。

组件目录结构

ComponentName/           # 组件名称 = 文件夹名（全局唯一）
├── index.vue            # 入口文件（必需）
├── README.md            # 组件文档（建议）
├── comp.json            # 配置文件（自动生成，name + version + __id__）
├── main.js              # UI 框架注册（可选，需要第三方 UI 库时添加）
├── demo/                # 预览示例
│   ├── index.vue        # 小窗预览（列表页展示）
│   └── full.vue         # 全屏预览（详情页展示，建议配置）
└── assets/              # 静态资源（如有）

核心规范（生成代码时必须遵守）

1. 命名规则

组件名称具有全局唯一性，不能与已有组件重名
建议采用前缀命名法：公司名-业务域-组件名，如 alipay-data-table
仅支持字母、数字、连字符 - 和下划线 _

2. 资源引用 — 必须使用相对路径

✅ import bgIcon from './assets/bg.png'
❌ import bgIcon from '@/assets/bg.png'

3. 入口文件

必须包含 index.vue 作为组件入口
组件应是自包含的，依赖通过 import 声明即可，系统会自动识别

4. UI 框架支持（可选 main.js）

组件预览基于 Vue 运行，所有 Vue 生态下的 UI 框架均可直接使用。只需在组件根目录添加 main.js 文件，引入并注册即可。

Vue 2

import Vue from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

Vue.use(Antd);

Vue 2 默认导出 Vue 构造函数，直接调用 Vue.use() 注册插件即可。

Vue 3

Vue 3 不再默认导出，所有导出都是具名导出。在 comp-hub 渲染环境下，组件预览的 app 实例由工具内部创建，main.js 无法通过 createApp() 创建 app。为此，comp-hub 会将内部 app 实例挂载到 Vue 命名空间上，直接通过 Vue.app 使用即可：

import * as Vue from 'vue';
import ArcoVue from '@arco-design/web-vue';
import '@arco-design/web-vue/dist/arco.css';

Vue.app.use(ArcoVue);

这与官方 app.use() 的调用方式不同，但功能等价——注册后，组件预览即可使用该 UI 框架的所有组件，无需在每个组件中重复导入。

5. Demo 文件

demo/mini.vue — 小窗预览，需固定内容尺寸（如 320×240）并使用缩放居中 API（见第 8 节）
demo/full.vue — 全屏预览，展示完整功能，宽高继承父元素（width: 100%; height: 100%），无需缩放

6. 样式

支持 SCSS（

comp-hub-create

概述