comp-hub

A Vue-based component preview and sharing platform that makes component reuse simple and efficient.

📖 Introduction

comp-hub is a component management platform designed for frontend developers, dedicated to solving pain points such as component reuse, missing documentation, and low standardization. By providing real-time preview, dependency management, and version control, it makes component sharing and usage simple and efficient.

🚀 Core Features

• Real-time Preview & Dependency Management: Online real-time component preview with automatic dependency version matching, ensuring what you see is what you get after download
• Lightweight Component Architecture: Components contain only minimal runtime units, seamlessly integrating into existing project environments
• Simple Upload Process: Complete component publishing in three steps, supporting preview configuration, documentation, and version management
• Documentation Support: Standard Markdown documentation support to help users quickly understand and use components
• Version Management: Semantic versioning with multi-version coexistence and switching
• Cross-project Reuse: Standardized component structure ensures high compatibility and portability across different projects

📦 Supported Frameworks

| Framework | Version | Status | |-----------|---------|--------| | Vue | 2.x | ✅ Supported | | Vue | 3.x | ✅ Supported | | React | - | ⏳ Planned |

💻 Installation & Usage

Requirements

• Node.js >= 16.0.0
• npm >= 8.0.0

Installation

Method 1: Global Installation (Recommended)

Install comp-hub CLI globally:

npm install comp-hub@latest -g

Method 2: Local Dev Dependency Installation

Install only in the current project:

npm install comp-hub@latest -D

Start Service

Global Installation

Execute in the project directory:

comphub

Local Installation

If installed locally with -D, use npx:

npx comphub

After successful startup, access the platform at:

http://localhost:5000

CLI Options

comphub [options]

| Option | Short | Type | Default | Description | |--------|-------|------|---------|-------------| | --port | -p | number | 5000 | Service port | | --dir | -d | path | "./" | Resource directory relative path | | --log | -l | level | "info" | Log level | | --version | -v | - | - | Show version number | | --help | -h | - | - | Show help information |

Configuration File

Create .comphub.json or .comphub.js in the project root:

JSON Format:

{
  "port": 5000,
  "dir": "./src",
  "log": "info"
}

JS Format:

module.exports = {
  port: 5000,
  dir: './src',
  log: 'info'
}

| Config | Type | Default | Description | |--------|------|---------|-------------| | port | number | 5000 | Service startup port | | dir | string | "./" | Component code root directory path | | log | string | "info" | Log level: "debug", "info", "warn", "error" |

📚 Documentation

Complete usage guide and API documentation:

comp-hub Official Documentation

🔧 Component Specifications

• Components must be uploaded as folders, with the folder name as the component name
• Component folder must contain index.vue as the entry file
• Recommended to provide README.md describing component functionality and usage
• Support comp.json file for component metadata configuration

🎯 Version Management

comp-hub supports semantic versioning:

• X.Y.Z format (e.g., 1.2.3)
• X: Major version, incompatible API changes
• Y: Minor version, backward-compatible functionality additions
• Z: Patch version, backward-compatible bug fixes

🤝 Contributing

Contributions and suggestions are welcome!

📝 License

MIT License