组件上传指南

本章节将详细介绍如何将 Vue 2/Vue 3 编写的组件上传到 comp-hub 平台，实现组件的共享与复用。

组件上传规范

为确保组件能够在平台中正常使用和展示，请严格遵循以下上传规范：

1. 组件结构要求：组件必须以文件夹形式上传，文件夹名称即为组件名称。
2. 入口文件：组件文件夹下必须包含 index.vue 文件，作为组件的唯一入口文件。
3. 文档说明：如需展示组件文档，必须在组件文件夹根目录下包含 README.md 文件，用于详细描述组件的功能、使用方法、属性配置和示例等信息。
4. 元数据配置：组件文件夹需包含 comp.json 文件，用于描述组件的元数据（如组件名称、版本号等）。该文件可由平台自动生成。
5. 命名唯一性：平台不允许上传与已存在组件名称相同的组件。推荐通过添加前缀（如公司/个人标识）的方式解决命名冲突问题。
6. 原创性建议：平台不推荐上传重复或高度相似的组件（例如，从市场下载组件后简单重命名再上传）。平台会进行智能检测并提示重复上传，但不会完全禁止操作。

重复组件的处理策略

对于被系统识别为重复的组件，平台将采取以下管理策略：

• 该组件不会进入「推荐」「热门」「最新」等任何公共展示列表
• 用户仅能在我的组件列表中查看和管理该组件
• 平台会在功能相似组件的「相似组件」栏目中展示本品，作为替代选项之一
• 后续版本更新同样不享受推荐权重，直至组件实现足够的差异性并通过系统重新评估

操作流程指南

1. 进入上传页面

启动 comp-hub 服务后，打开 comp-hub 网站，点击左侧菜单栏中的上传组件选项，即可进入组件上传页面。

2. 选择组件文件夹

• 左侧区域展示的是当前项目中可读写的文件夹目录（由 comphub.json 文件配置）
• 导航至您的组件所在目录（例如 components 目录）
• 选中目标组件文件夹（如本例中的 HelloWorld 文件夹）
• 点击选择按钮确认

3. 查看上传界面结构

选择组件文件夹后，右侧区域将分为两个主要部分：

1. 顶部：组件预览结果展示区
2. 底部：组件配置区域

配置区域详解

预览配置

预览配置模块用于控制组件在平台不同页面的展示效果：

• 小窗预览文件（必填）：选择预览文件后，顶部小窗面板会实时展示预览效果。小窗预览主要用于组件列表页的快速展示。
• 全屏预览文件（选填）：选择后将在全屏面板展示效果，主要用于组件详情预览页。若未配置，系统将自动使用小窗预览配置。
• 备注说明（必填）：组件预览时显示的描述信息，用于简要说明组件功能和使用场景。
• 添加预览入口：点击可添加多个预览配置（最多支持5项），适用于展示组件的多种状态或用法。
• 多预览切换：配置多项预览时，系统会自动以走马灯形式展示，用户可通过左右箭头切换查看。

配置检查

配置检查模块用于验证组件结构是否符合规范：

• 点击生成按钮，系统会自动创建或更新 comp.json 文件
• 生成后的配置文件内容示例：
• 生成配置后，可手动编辑组件版本号

其他配置项

• 组件目录：实时展示当前选中组件的文件夹结构
• 附加信息（必填）：详细描述组件功能和特性的文本，将用于组件市场的搜索和展示

预览区域功能

预览区域提供组件的实时展示和交互功能：

• 小窗面板：模拟组件在市场列表页的预览效果
• 全屏面板：模拟组件在详情页的完整预览效果
• 刷新按钮：重新加载组件，适用于修改后查看最新效果
• 背景板取色器：用于调整预览区域背景色，确保组件在最佳视觉环境下展示。选择的背景色将随组件一起发布到平台。

发布最小案例

以下是一个最小化的组件发布示例：

目录结构

HelloWorld/
├── comp.json
└── index.vue

组件代码（index.vue）

<template>
  <div class="hello-world">
    <h1>Hello World</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
}
</script>

<style scoped>
.hello-world {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

完成以上配置后，点击页面底部的上传按钮，即可将组件发布到 comp-hub 平台。

后续步骤

组件成功上传后，您可以：

• 查看已上传的组件：在左侧菜单选择我的组件
• 管理组件版本：参考更新组件章节