Télécharger et utiliser

Cette page explique comment référencer et exécuter correctement un composant une fois récupéré dans le projet local.

Deux points d'entrée pour télécharger un composant

Depuis le marché des composants

1. Trouvez le composant cible dans la liste.
2. Cliquez sur « Télécharger » sur la carte.
3. Dans le sélecteur de fichiers, accédez au répertoire des composants du projet (par exemple src/components).
4. Cliquez sur « Sélectionner le dossier » pour confirmer.

Depuis la page d'aperçu

1. Ouvrez la page de détail du composant.
2. Cliquez sur « Télécharger » en bas à droite.
3. Choisissez l'emplacement d'enregistrement.

Une fois le téléchargement terminé, le composant apparaît sous forme de dossier dans le répertoire que vous avez choisi.

Structure du répertoire après téléchargement

MyComponent/
├── index.vue          # Fichier d'entrée (extension variable selon le framework)
├── README.md          # Documentation d'utilisation
├── comp.json          # Métadonnées du composant générées par la plateforme
├── demo/              # Exemples d'aperçu (si fournis par l'auteur)
│   ├── index.vue
│   └── full.vue
└── assets/            # Ressources propres au composant (le cas échéant)

comp.json ne contient que trois champs, __id__, name et version, qui servent à identifier le composant. N'y inscrivez pas les dépendances : elles sont déterminées par les import du code source.

Référencer le composant dans le projet

Vue 3

<template>
  <MyComponent title="Exemple" :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="Exemple" />;
}

L'entrée du composant doit avoir un default export. Avec seulement des exports nommés, l'aperçu comme le référencement échouent.

Installer les dépendances

Les paquets tiers utilisés par le composant ne sont pas embarqués avec lui ; installez-les dans votre projet :

npm install echarts

La version ne doit pas nécessairement être identique à celle de l'auteur : la plateforme effectue une correspondance des dépendances lors de l'aperçu ; une fois le composant téléchargé, ce sont les versions de votre projet qui s'exécutent. La liste des dépendances figure dans le README ou dans la zone des dépendances de la page d'aperçu.

Questions fréquentes

Le composant ne se rend pas

Vérifiez dans l'ordre : le framework correspond-il (Vue 2 / Vue 3 / React), les dépendances sont-elles installées, quelle est la première erreur affichée dans la console. La plupart du temps, il manque une dépendance ou la version a changé de majeure.

Les styles entrent en conflit avec le projet

Un composant doit utiliser des styles scoped. Pour surcharger réellement des styles internes, utilisez :deep(), sans écrire de sélecteurs globaux.

comp.json est introuvable après le téléchargement

Cela signifie que vous avez téléchargé un artefact d'une ancienne version ou que des fichiers ont été oubliés lors d'une copie manuelle. Retéléchargez le composant ; l'absence de comp.json gênera l'identification du composant lors des mises à jour.

Je veux modifier le composant puis le republier

Voir Mise à jour et versions.

Prochaines étapes

• Écrire votre propre composant : Spécification des composants
• Renvoyer votre version modifiée sur la plateforme : Téléverser et publier