Component Upload Guide

Uploading components to comp-hub takes just three steps: select folder, configure preview, and click publish.

Prerequisites

Before uploading, please ensure the component meets the following conditions:

1. Folder Format: Components must exist as folders, with the folder name being the component name
2. Entry File: Must include index.vue as the component entry
3. Independently Runnable: Components should be self-contained, with dependencies imported via relative paths

Recommended directory structure:

MyComponent/           # Component name
├── index.vue         # Entry file (required)
├── README.md         # Component documentation (recommended)
├── comp.json         # Configuration file (auto-generated)
└── assets/           # Static resources (if any)
    └── logo.png

Naming Conventions

• Component names are globally unique and cannot duplicate existing component names
• Prefix naming is recommended, e.g., company-business-domain-component-name: alipay-data-table
• Only letters, numbers, hyphens -, and underscores _ are supported

Duplicate Component Handling

The platform performs similarity detection on uploaded components. If judged as a duplicate component:

• Will not enter public lists such as "Recommended", "Popular", "Latest"
• Can only be viewed and managed in "My Components"
• Will appear in the recommended list of similar components
• Updates also do not enjoy recommendation weight

It is recommended to check if there are functionally similar components before uploading to avoid reinventing the wheel.

Upload Steps

1. Enter Upload Page

After starting comp-hub, click "Upload Component" in the left menu.

2. Select Component

• The left file tree displays the directory specified by dir in .comphub.json or .comphub.js
• Navigate to the component folder and select it
• Click "Select" to confirm

3. Configure Preview

The upload page is divided into upper and lower areas:

Upper Preview Area

• Real-time display of component rendering effects
• Supports refresh and background color switching

Lower Configuration Area

• Small Window Preview: Select demo/index.vue or the component itself for list page display
• Full Screen Preview: Select demo/full.vue for detail page display (recommended)
• Remarks: Brief description of component function and applicable scenarios
• Additional Info: Detailed description, supports search keywords

4. Generate Configuration

Click the "Generate Configuration" button, and the system will automatically create a comp.json file containing:

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

5. Publish Component

After confirming the configuration is correct, click the "Publish" button to complete the upload.

Minimal Example

Here is a simplest uploadable component:

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

<script>
export default {
  name: 'MyButton',
  props: {
    text: {
      type: String,
      default: 'Click Me'
    }
  },
  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>

Best Practices

• Write README: Detailed explanation of component usage, properties, events, and examples
• Provide Demo: Create a demo directory to showcase typical component usage
• Semantic Versioning: Follow the major.minor.patch specification
• Handle Dependencies: Third-party dependencies only need to be installed locally, no need to package into the component