Downloaden en gebruiken

Deze pagina legt uit hoe je een component correct importeert en draait nadat je het naar je lokale project hebt gehaald.

Twee manieren om een component te downloaden

Vanuit de componentmarkt

1. Zoek het gewenste component in de lijst.
2. Klik op "Downloaden" op de kaart.
3. Navigeer in de bestandskiezer naar de componentmap van het project (bijvoorbeeld src/components).
4. Klik op "Map selecteren" om te bevestigen.

Vanuit de previewpagina

1. Open de detailpagina van het component.
2. Klik rechtsonder op "Downloaden".
3. Kies de opslaglocatie.

Na de download verschijnt het component als map in de door jou gekozen map.

Mapstructuur na het downloaden

MyComponent/
├── index.vue          # Entry-bestand (per framework een andere extensie)
├── README.md          # Gebruiksaanwijzing
├── comp.json          # Door het platform gegenereerde componentmetadata
├── demo/              # Previewvoorbeelden (als de auteur ze levert)
│   ├── index.vue
│   └── full.vue
└── assets/            # Eigen resources van het component (indien aanwezig)

comp.json bevat alleen de drie velden __id__, name en version en dient om de identiteit van het component vast te leggen. Zet er geen dependencies in; dependencies worden bepaald door de import in de broncode.

Importeren in je project

Vue 3

<template>
  <MyComponent title="Voorbeeld" :data="rows" />
</template>

<script setup>
import MyComponent from "@/components/MyComponent/index.vue";
</script>

Vue 2

import MyComponent from "@/components/MyComponent/index.vue";

export default {
  components: { MyComponent }
};

React

import MyComponent from "@/components/MyComponent/index.jsx";

export default function Demo() {
  return <MyComponent title="Voorbeeld" />;
}

Het entry-bestand van een component moet een default export hebben. Bij alleen named exports geven zowel de preview als het importeren een fout.

Dependencies installeren

Externe pakketten die het component gebruikt, worden niet mee gebundeld; installeer ze in je eigen project:

npm install echarts

De versie hoeft niet exact die van de auteur te zijn: het platform doet bij de preview dependency-matching. Na het downloaden draait het component met de versie van jouw project. De dependency-lijst van een component vind je in de README of in het dependency-gebied van de previewpagina.

Veelgestelde vragen

Het component rendert niet

Controleer in deze volgorde: klopt het framework (Vue 2 / Vue 3 / React), zijn de dependencies geïnstalleerd, en wat is de eerste fout in de console. Meestal ontbreekt een dependency of wijkt de versie een major-versie af.

De styles conflicteren met het project

Een component hoort scoped-styles te gebruiken. Moet je toch interne styles overschrijven, gebruik dan :deep() en geen globale selectors.

Na het downloaden is er geen comp.json

Dan heb je een ouder artefact gedownload of bij het handmatig kopiëren een bestand overgeslagen. Download opnieuw; een ontbrekende comp.json maakt het bij latere updates lastiger om de identiteit van het component te herkennen.

Ik wil een component aanpassen en opnieuw publiceren

Zie Bijwerken en versies.

Volgende stappen

• Zelf een component schrijven: Componentspecificatie
• De aangepaste versie terugsturen naar het platform: Uploaden en publiceren