Démarrage rapide

Ce chapitre vous guidera à travers l'installation et le démarrage de comp-hub, ce qui ne prend pas plus de 5 minutes.

Le plus rapide — aucune installation requise

Exécutez ceci dans le répertoire de votre projet et comp-hub démarre immédiatement ; npx télécharge le CLI à la demande :

npx comp-hub

Vous préférez une installation permanente ? Voir la Méthode 1.

Prérequis

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

Frameworks pris en charge

Framework	Version	Statut
Vue	2.x	✅ Pris en charge
Vue	3.x	✅ Pris en charge
React	18.x	✅ Pris en charge
React	17.x	✅ Pris en charge

Installation

Méthode 1 : Installation globale (recommandée)

Installez globalement le CLI comp-hub. Après l'installation, vous pouvez utiliser directement la commande comphub :

npm install comp-hub@latest -g

Méthode 2 : Installation en dépendance de développement locale

Installez uniquement dans le projet actuel, adapté aux scénarios de collaboration en équipe :

npm install comp-hub@latest -D

Méthode 3 : Sans installation (npx)

Essayez comp-hub sans rien installer — npx télécharge le CLI à la demande :

npx comp-hub

comp-hub est l'un des alias binaires du CLI (avec comphub et ch). Comme l'alias correspond au nom du paquet, npx comp-hub résout et démarre directement le CLI.

Démarrer le service

Démarrer après l'installation globale

Exécutez dans le répertoire du projet :

comphub

Démarrer après l'installation locale

Si vous avez installé localement avec -D, vous devez exécuter via npx :

npx comphub

Démarrer sans installation

Ignorez complètement l'installation et lancez le CLI via npx :

npx comp-hub

Après un démarrage réussi, le terminal affichera une sortie similaire à la suivante :

✓ comp-hub v0.44.11

   ██████╗  ██████╗  ███╗   ███╗ ██████╗       ██╗  ██╗ ██╗   ██╗ ██████╗
  ██╔════╝ ██╔═══██╗ ████╗ ████║ ██╔══██╗      ██║  ██║ ██║   ██║ ██╔══██╗
  ██║      ██║   ██║ ██╔████╔██║ ██████╔╝      ███████║ ██║   ██║ ██████╔╝
  ██║      ██║   ██║ ██║╚██╔╝██║ ██╔═══╝       ██╔══██║ ██║   ██║ ██╔══██╗
  ╚██████╗ ╚██████╔╝ ██║ ╚═╝ ██║ ██║           ██║  ██║ ╚██████╔╝ ██████╔╝
   ╚═════╝  ╚═════╝  ╚═╝     ╚═╝ ╚═╝           ╚═╝  ╚═╝  ╚═════╝  ╚═════╝

  Version  0.44.11
  Project  /home/user/projects/housing/vue2
  Hash     9de6965c
  Port     5478

  URL      http://localhost:5478/9de6965c/main/

  ─────────────────────────────────────────────

  comphub status                View all projects
  comphub stop    9de6965c      Stop current project
  comphub stop    --all         Stop all projects
  comphub kill                  Shutdown master

Utilisez un navigateur pour accéder à l'URL affichée et entrer sur la plateforme comp-hub.

ch est un alias abrégé de comphub. Après la bannière, le CLI diffuse les journaux MidwayJS du projet ; appuyez sur Ctrl+C pour arrêter. Voir la Référence CLI.

Paramètres de ligne de commande du CLI

Vous pouvez également configurer les options de démarrage via des paramètres de ligne de commande :

comphub [options]

Description des paramètres :

Paramètre	Court	Type	Défaut	Description
--port	-p	number	5478	Port du service
--dir	-d	path	"./"	Chemin relatif du répertoire des ressources
--log-level	-l	string	"error"	Niveau de journal : debug, info, warn, error

| --version | -v | - | - | Afficher le numéro de version | | --help | -h | - | - | Afficher l'aide |

Exemples d'utilisation :

# Démarrer avec le port spécifié
comphub -p 8080

# Spécifier le répertoire des ressources
comphub -d ./src

# Ajuster le niveau de journal
comphub -l debug

# Afficher le numéro de version
comphub -v

# Afficher l'aide
comphub -h

Configuration

Pour spécifier le répertoire des composants ou configurer des règles de proxy personnalisées, créez un fichier .comphub.json ou .comphub.js dans le répertoire racine du projet :

Format du fichier de configuration

Format JSON (.comphub.json) :

{
  "dir": "./src",
  "allowDebug": false
}

Format JS (.comphub.js) :

NOTE

Faites attention au système de modules de votre projet — utilisez la syntaxe d'exportation qui correspond à votre projet.

• CommonJS (lorsque package.json n'a pas "type": "module" ou a "type": "commonjs") :

module.exports = {
  dir: './src',
  allowDebug: false
}

• ESM (lorsque package.json a "type": "module") :

export default {
  dir: './src',
  allowDebug: false
}

Éléments de configuration

Élément de configuration	Type	Défaut	Description
dir	string	"./"	Chemin relatif du répertoire racine du code du composant. Seuls ce répertoire et ses sous-répertoires peuvent être manipulés lors du téléversement/téléchargement
allowDebug	boolean	false	Autoriser ou non le mode débogage
proxy	object	-	Règles de proxy personnalisées, même format que les options de http-proxy-middleware

Priorité de chargement du fichier de configuration

1. Tentez de charger .comphub.json en premier
2. Si le fichier JSON n'existe pas, tentez de charger .comphub.js
3. Si aucun n'existe, utilisez la configuration par défaut

Priorité de configuration

Priorité des valeurs de configuration de la plus haute à la plus basse :

1. Paramètres de ligne de commande (par exemple, -d ./src)
2. Fichier de configuration (.comphub.json ou .comphub.js)
3. Configuration par défaut

Prochaines étapes

Une fois le service démarré, vous pouvez :

• Téléverser un composant — Publiez vos composants sur la plateforme
• Aperçu et téléchargement — Consultez et utilisez les composants des autres