Démarrage rapide

Cette page vous accompagne pour démarrer comp-hub de zéro et publier votre premier composant. Tout se passe dans le terminal et le navigateur.

Prérequis

Élément	Exigence
Node.js	16.0.0 ou supérieur
npm	8.0.0 ou supérieur
Navigateur	Navigateurs modernes : Chrome, Edge, Firefox, etc.

Démarrer le service local

Exécutez la commande à la racine du projet (le projet qui contient les composants) :

npx comp-hub

npx télécharge la CLI à la demande, ce qui convient à un premier essai. Pour un usage durable, préférez l'une des deux méthodes suivantes :

# Installation globale, puis utilisation directe de la commande comphub
npm install comp-hub@latest -g

# Ou comme dépendance de développement du projet
npm install comp-hub@latest -D
npx comphub

comphub, ch et comp-hub sont trois noms pour un même programme ; utilisez celui que vous voulez.

Ce que vous verrez

Une fois le démarrage réussi, le terminal affiche la version, le chemin du projet, le hash du projet, le port et l'adresse d'accès :

✓ comp-hub v0.44.11

  Version  0.44.11
  Project  D:\project\my-app
  Hash     94525912
  Port     5478

  URL      http://localhost:5478/94525912/main/

Ouvrez l'URL dans le navigateur pour accéder à la plateforme. Paramètres courants :

comphub -p 8080     # Spécifier le port
comphub -d ./src    # Spécifier le répertoire racine des composants
comphub -l debug    # Ajuster le niveau de journalisation

Pourquoi le port ne change-t-il pas ?

-p ne prend effet que si le processus master n'est pas encore démarré. Si un service tourne déjà, le port d'origine est réutilisé ; pour en changer, exécutez d'abord comphub kill.

Publier votre premier composant

Un composant est un dossier ; le nom du dossier est celui du composant. Préparez d'abord la structure minimale suivante :

MyButton/
├── index.vue      # Fichier d'entrée (Vue ; React utilise index.jsx / index.tsx)
└── README.md      # Facultatif, mais fortement recommandé

Effectuez ensuite trois étapes dans la plateforme :

1. Téléverser le composant : dans le menu de gauche, ouvrez « Téléverser un composant », sélectionnez le dossier MyButton dans l'arborescence, puis cliquez sur « Sélectionner ».
2. Configurer l'aperçu : choisissez les fichiers d'aperçu en petite fenêtre et en plein écran, vérifiez les dépendances détectées automatiquement, renseignez la description.
3. Publier : cliquez sur « Générer la configuration » pour créer comp.json, puis sur « Publier » après vérification.

Une fois publié, le composant apparaît dans « Mes composants » et dans le marché des composants. Pour les règles complètes, voir Téléverser et publier ; pour l'écriture du composant, voir Spécification des composants.

Prochaines étapes

• Voir d'abord ce que propose la plateforme : Trouver et prévisualiser
• Utiliser le composant d'un collègue dans votre projet : Télécharger et utiliser
• Écrire un composant de zéro : Utiliser Studio
• Gérer le service et publier en ligne de commande : Utiliser la CLI