Snel starten

Deze pagina loodst je van nul naar een draaiende comp-hub en je eerste gepubliceerde component. Je hebt alleen een terminal en een browser nodig.

Vereisten

Item	Vereiste
Node.js	16.0.0 of hoger
npm	8.0.0 of hoger
Browser	Moderne browsers zoals Chrome, Edge en Firefox

Lokale service starten

Voer dit uit in de hoofdmap van het project (het project waarin de componenten staan):

npx comp-hub

npx haalt de CLI op wanneer dat nodig is — handig voor een eerste kennismaking. Voor langdurig gebruik kun je beter een van de volgende twee manieren kiezen:

# Globaal installeren, daarna direct het commando comphub gebruiken
npm install comp-hub@latest -g

# Of als dev-dependency van het project
npm install comp-hub@latest -D
npx comphub

comphub, ch en comp-hub zijn drie namen voor hetzelfde programma; je kunt elke naam gebruiken.

Wat je te zien krijgt

Na een geslaagde start print de terminal de versie, het projectpad, de project-hash, de poort en het toegangsadres:

✓ comp-hub v0.44.11

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

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

Open de URL in je browser om het platform te openen. Veelgebruikte parameters:

comphub -p 8080     # Poort opgeven
comphub -d ./src    # Hoofdmap van de componenten opgeven
comphub -l debug    # Logniveau aanpassen

Waarom verandert de poort niet

-p werkt alleen zolang er nog geen master-proces draait. Als er al een service draait, wordt de bestaande poort hergebruikt; voer eerst comphub kill uit als je een andere poort nodig hebt.

Je eerste component publiceren

Een component is een map; de mapnaam is de componentnaam. Bereid eerst deze minimale structuur voor:

MyButton/
├── index.vue      # Entry-bestand (Vue; React gebruikt index.jsx / index.tsx)
└── README.md      # Optioneel, maar sterk aanbevolen

Daarna doorloop je drie stappen op het platform:

1. Component uploaden: ga in het linkermenu naar "Component uploaden", selecteer de map MyButton in de bestandsboom en klik op "Selecteren".
2. Preview configureren: kies de bestanden voor de preview in klein venster en op volledig scherm, controleer de automatisch gevonden dependencies en vul een toelichting in.
3. Publiceren: klik op "Configuratie genereren" om comp.json aan te maken en klik na controle op "Publiceren".

Na een geslaagde publicatie verschijnt het component in "Mijn componenten" en in de componentmarkt. De volledige regels staan in Uploaden en publiceren; hoe je een component schrijft, staat in Componentspecificatie.

Volgende stappen

• Eerst kijken wat er op het platform staat: Vinden en bekijken
• Een component van iemand anders in je project gebruiken: Downloaden en gebruiken
• Vanaf nul een component schrijven: Studio gebruiken
• Service en publicatie vanaf de commandoregel beheren: De CLI gebruiken