组件上传指南

将组件上传到 comp-hub 只需三步：选择文件夹、配置预览、点击发布。

前置要求

上传前请确保组件满足以下条件：

文件夹形式：组件必须以文件夹形式存在，文件夹名称即为组件名称
入口文件：必须包含 index.vue 作为组件入口
独立可运行：组件应是自包含的，依赖通过相对路径引入

推荐的目录结构：

MyComponent/           # 组件名称
├── index.vue         # 入口文件（必需）
├── README.md         # 组件文档（建议）
├── comp.json         # 配置文件（自动生成）
└── assets/           # 静态资源（如有）
    └── logo.png

命名规范

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

重复组件处理

平台会对上传的组件进行相似度检测。若被判定为重复组件：

不会进入「推荐」「热门」「最新」等公共列表
仅可在「我的组件」中查看和管理
会出现在相似组件的推荐列表中
更新时同样不享受推荐权重

建议在上传前检查是否已有功能相似的组件，避免重复造轮子。

上传步骤

1. 进入上传页面

启动 comp-hub 后，在左侧菜单点击「上传组件」。

2. 选择组件

左侧文件树显示 .comphub.json 或 .comphub.js 中 dir 指定的目录
导航到组件所在文件夹并选中
点击「选择」确认

3. 配置预览

上传页面分为上下两个区域：

上方预览区

实时展示组件渲染效果
支持刷新和切换背景色

下方配置区

小窗预览：选择 demo/index.vue 或组件本身，用于列表页展示
全屏预览：选择 demo/full.vue，用于详情页展示（建议配置）
备注说明：简短描述组件功能和适用场景
附加信息：详细描述，支持搜索关键词

4. 生成配置

点击「生成配置」按钮，系统会自动创建 comp.json 文件，包含：

json

{
  "__id__": "xxxxxxxxxxxxxxxxxxxxxxxx",
  "name": "MyComponent",
  "version": "1.0.0"
}

5. 发布组件

确认配置无误后，点击「发布」按钮完成上传。

最小化示例

以下是一个最简单的可上传组件：

vue

<!-- MyButton/index.vue -->
<template>
  <button class="my-button" @click="handleClick">
    {{ text }}
  </button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    text: {
      type: String,
      default: '点击我'
    }
  },
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

<style scoped>
.my-button {
  padding: 8px 16px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

最佳实践

编写 README：详细说明组件用途、属性、事件和示例
提供 Demo：创建 demo 目录，展示组件的典型用法
语义化版本：遵循 主版本.次版本.补丁版本 规范
处理依赖：第三方依赖在本地安装即可，无需打包到组件中

组件上传指南 ​

前置要求 ​

命名规范 ​

重复组件处理 ​

上传步骤 ​

1. 进入上传页面 ​

2. 选择组件 ​

3. 配置预览 ​

4. 生成配置 ​

5. 发布组件 ​

最小化示例 ​

最佳实践 ​