0Pricing
Vue Academy · Lezione

Scrittura delle storie dei componenti

Formato CSF3, export predefinito (title, component), export nominati come storie, args.

Scrittura delle storie dei componenti è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Le story descrivono gli stati dei componenti

Una story rappresenta uno stato di un componente, ovvero un insieme specifico di props e contenuti. Un pulsante può avere le story Primary, Secondary e Disabled. Storybook esegue il rendering di ognuna come esempio separato e consultabile.

CSF3: il formato moderno

Storybook usa Component Story Format 3 (CSF3). Un file contiene un export predefinito che descrive il componente ed export denominati per ogni story. Si tratta di semplici oggetti JavaScript/TypeScript, con un minimo di codice ripetitivo.

L'export predefinito (Meta)

L'export predefinito è l'oggetto meta. Come minimo contiene un title (il percorso nella barra laterale) e il component documentato.

import Button from "./Button.vue"

export default {
  title: "Components/Button",
  component: Button,
}

title organizza la barra laterale

title usa le barre per creare una gerarchia di cartelle nella barra laterale di Storybook. "Forms/Inputs/TextField" crea una struttura nidificata su tre livelli.

export default {
  title: "Forms/Inputs/TextField",
  component: TextField,
}

Gli export denominati sono story

Ogni export denominato è una variante di una story. Il nome dell'export diventa l'etichetta della story nella barra laterale.

export const Primary = {}
export const Secondary = {}
export const Disabled = {}

L'oggetto args

L'oggetto args di una story fornisce i valori delle props. Storybook li passa al componente e il pannello Controls consente di modificarli in tempo reale.

export const Primary = {
  args: {
    label: "Click me",
    variant: "primary",
  },
}

Più varianti tramite args

Riutilizzi lo stesso componente in più story modificando soltanto args. Ogni export esegue il rendering del componente con props diverse.

export const Primary = { args: { variant: "primary", label: "Save" } }
export const Danger = { args: { variant: "danger", label: "Delete" } }

Args predefiniti nel meta

Inserisca gli args condivisi nell'oggetto meta; le singole story sovrascrivono solo ciò che cambia. In questo modo le story rimangono DRY.

export default {
  component: Button,
  args: { label: "Button" }, // default for all stories
}

export const Disabled = { args: { disabled: true } }

Story con slot tramite render

Per il contenuto negli slot, fornisca una funzione render che restituisca un template usando il componente. Questo permette di gestire i casi che i soli args non possono esprimere.

export const WithIcon = {
  render: (args) => ({
    components: { Button },
    setup() { return { args } },
    template: '<Button v-bind="args">⭐ Star</Button>',
  }),
}

Documentazione generata automaticamente con tags

Aggiunga tags: ["autodocs"] al meta per fare in modo che Storybook generi automaticamente una pagina di documentazione per il componente, a partire dalle sue props e dalle sue story.

export default {
  title: "Components/Button",
  component: Button,
  tags: ["autodocs"],
}

Cosa produce autodocs

La pagina autodocs elenca le props del componente (nome, tipo e valore predefinito), mostra ogni story come esempio interattivo e visualizza eventuali commenti descrittivi: una specifica sempre aggiornata, senza file aggiuntivi.

Verifica rapida

Verifichi la Sua comprensione della scrittura delle story.

Riepilogo

Ha imparato a scrivere story per i componenti:

  • Una story rappresenta uno stato di un componente; CSF3 usa export di oggetti.
  • L'export predefinito è il meta con title (percorso nella barra laterale) e component.
  • Ogni export denominato è una variante di una story; args fornisce i valori delle sue props.
  • Gli args condivisi vanno nel meta; le story sovrascrivono il resto. Usi render per gli slot.
  • tags: ["autodocs"] genera automaticamente una pagina di documentazione.

Domande Frequenti

La lezione «Scrittura delle storie dei componenti» è gratuita?

Sì — il testo completo di «Scrittura delle storie dei componenti» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Scrittura delle storie dei componenti»?

Formato CSF3, export predefinito (title, component), export nominati come storie, args. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Scrittura delle storie dei componenti»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Configurazione di Storybook per Vue 3
  2. Scrittura delle storie dei componenti
  3. Controls, Actions e Args
  4. Addon di Storybook e test di accessibilità
← Torna a Vue Academy