Studio gebruiken

Studio is de componentwerkruimte in de browser: links een bestandsboom, in het midden de editor met dubbele preview, rechts het AI-gesprek en de terminal. Je hebt geen lokale omgeving nodig; open de webpagina en schrijf vanaf nul een component en publiceer het.

Studio openen

Er zijn twee manieren:

• Open direct het Studio-adres (in productie studio.comphub.cn).
• Klik op de detailpagina van een component op het platform op "Openen in Studio" om een online component als werkruimte te importeren.

Bij de eerste keer kom je op de pagina voor werkruimteselectie: daar staan de werkruimtes die al in deze browser bestaan; je kunt doorgaan met een bestaande of een nieuwe aanmaken.

Gegevens staan in de browser

Werkruimtes, bestanden en gespreksgeschiedenis worden opgeslagen in de IndexedDB van de browser op dit apparaat en worden niet automatisch naar andere apparaten of browsers gesynchroniseerd.

Rondleiding door de interface

Gebied	Inhoud
Linkerkolom	Bestandsboom: bestanden maken/verwijderen, slepen, van component wisselen
Middenkolom	Code-editor + previewpaneel (mini in klein venster / full op volledig scherm)
Rechterkolom	AI-gesprek en terminal (boven/onder in dezelfde kolom)

De scheidingslijnen tussen panelen zijn versleepbaar; het previewpaneel kun je maximaliseren om details te bekijken.

Een component maken

Klik op nieuw en kies in het dialoogvenster "Component maken" een tab:

Vanuit template

Veld	Beschrijving
Framework	Vue / React / Web Component
Versie	De major-versie van Vue of React (bijvoorbeeld Vue 3, React 18)
Naam	Componentnaam, moet aan de naamgevingsregels voldoen
Tag	Alleen Web Component: de tag-naam van het custom element, zoals my-element

Na het aanmaken genereert Studio het entry-bestand, de README en comp.json, en installeert het automatisch de bijbehorende runtime. De voortgang van het installeren verschijnt in het terminalpaneel.

Lokaal importeren

Sleep een bestaande componentmap het dialoogvenster in, of kies lokale bestanden. Geschikt om een oud component uit een project over te nemen en aan te passen.

Bewerken en previewen

• Na het opslaan van een bestand ververst de preview automatisch.
• .vue-bestanden hebben geen hot update op moduleniveau; na opslaan wordt de hele pagina ververst (ongeveer 300 ms debounce).
• De preview bestaat uit twee panelen, mini en full, die overeenkomen met de weergave op de lijstkaart en de detailpagina van het platform.
• Het preview-entrypunt kun je in de bestandsboom aangeven; zonder keuze wordt de standaardentry uit de specificatie gebruikt (demo/index.vue / demo/full.vue).

Bij een lege preview eerst de dependencies controleren

De pakketten die een component gebruikt, moeten eerst zijn geïnstalleerd. Ontbreken er dependencies, dan meldt de bovenbalk dat en noemt de terminal welk pakket mist.

AI-gesprek

In het gespreksgebied rechts kun je de AI in natuurlijke taal code laten wijzigen. Er zijn twee bronnen van modellen:

Bron	Configuratie	Limiet
Ingebouwd in het platform	Geen configuratie nodig; na aanmelden direct een model kiezen	Aangemelde gebruikers zonder limiet; anoniem met limiet op ID + IP
Eigen key	Kies in "Instellingen" een provider, vul de API Key in en kies het standaardmodel	Bepaald door de provider

Een zelf ingevulde key wordt alleen in de browser op dit apparaat bewaard en niet geüpload. In de instellingen kun je kiezen of meerdere werkruimtes dezelfde configuratie delen.

Elke AI-wijziging verschijnt als een actiekaart: schrijven, verwijderen, commando's uitvoeren enzovoort. Bij verwijderen of wanneer jouw keuze nodig is, verschijnt eerst een bevestigingskaart; pas daarna wordt de actie uitgevoerd. Bij een fout wordt de reden getoond in plaats van de actie als voltooid voor te doen.

Terminal

De terminal is bedoeld om dependencies te installeren:

npm install echarts

Alleen installatiecommando's zoals npm install / npm i / npm add zijn toegestaan; andere commando's worden geblokkeerd met een melding. Standaard wordt de npmmirror-bron gebruikt; je kunt in het terminalpaneel terugschakelen naar npmjs.

Het installeren gebeurt in een virtuele omgeving in de browser en beïnvloedt je lokale project niet.

Snapshots en herstel

Studio slaat automatisch snapshots van de werkruimte op in IndexedDB:

• Na het verversen van de pagina worden bestanden en gesprekken automatisch hersteld.
• Bij het wisselen van tabblad of sluiten van de pagina is er een debounce-vangnet.
• Bij het verwijderen van een werkruimte wordt de bijbehorende snapshot mee verwijderd.

Is de map na het verversen leeg, controleer dan of je net een grote verwijderactie hebt gedaan; kies indien nodig een andere historische werkruimte uit de lijst.

Publiceren naar de componentbibliotheek

Selecteer de hoofdmap van het component in de bestandsboom en klik op publiceren. Het proces bestaat uit drie delen:

1. Aanmelden en autoriseren

Ben je niet aangemeld, dan verschijnt een autorisatie-ingang; bevestig in de browser en keer terug naar Studio. Autorisatie is maar één keer nodig.

2. Publicatiegegevens invullen

Veld	Beschrijving
Naam	Componentnaam, vast na de eerste publicatie
Versie	Semantische versie; bij een update moet die groter zijn dan de online versie
Beschrijving	Eén zin die het doel uitlegt
Tags	Maximaal 5, helpen bij het zoeken
Upgrade-toelichting	Bij een update: wat er deze keer is gewijzigd

3. Wachten tot de publicatiefasen klaar zijn

Studio doorloopt achtereenvolgens het maken van een screenshot, het verzamelen van bestanden, de precheck, het precompileren van dependencies en het indienen; de voortgang van elke fase wordt getoond. Na afronding verschijnt het resultaat met een ingang naar de detailpagina van het component.

De publiceerknop bepaalt automatisch of het "Publiceren" of "Bijwerken" is: komt de werkruimte van een online component en ben je nog steeds de auteur (of medeauteur), dan verschijnt Bijwerken; anders Publiceren.

Een ontbrekend preview-entrypunt blokkeert de publicatie

Bestaat het mini- of full-preview-entrypunt niet, dan vraagt Studio je dat vóór het publiceren aan te vullen. Plaats volgens de Componentspecificatie demo/index.vue en demo/full.vue.

Studio of CLI?

Scenario	Aanbevolen
Vanaf nul een component schrijven en al kijkend aanpassen	Studio
Eerste publicatie met preview en omschrijving	Studio of de uploadpagina
Bestaande component aanpassen en snel uitbrengen	comphub upload
Alleen omschrijving, tags of previewconfiguratie wijzigen	De updatepagina van het platform

Veelgestelde vragen

De preview blijft wit

Controleer eerst of de terminal nog dependencies installeert en daarna of de component-entry een default export heeft. Controleer bij een Web Component of de preview-HTML een modulescript in de <body> bevat.

De AI reageert niet

Controleer de bron van het huidige model: het ingebouwde model vereist aanmelding; bij een eigen key moet je controleren of de key geldig is en het model beschikbaar.

Bij het publiceren wordt gemeld dat je niet bent aangemeld

Doorloop de autorisatie-ingang opnieuw. De autorisatiepagina dient alleen om je identiteit te bevestigen en kopieert je browseraanmelding niet naar Studio.

Na verversen zijn de bestanden weg

Controleer of je de werkruimte niet hebt verwijderd; snapshots zijn per werkruimte gescheiden, dus na het wisselen van werkruimte zie je andere bestanden.

Volgende stappen

• Hoe je een component schrijft en wat de beperkingen zijn: Componentspecificatie
• Versiebeheer na publicatie: Bijwerken en versies