0Pricing
Vue Academy · Lezione

Configurazione di Storybook per Vue 3

npx storybook@latest init, .storybook/config, main.js, directory stories, avvio.

Configurazione di Storybook per Vue 3 è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 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.

Che cos'è Storybook

Storybook è un ambiente di lavoro per creare componenti UI in isolamento. Esegue il rendering di ogni componente in ogni stato al di fuori dell'app, lo documenta e lo verifica visivamente, tutto in una sandbox del browser dedicata.

Perché usarlo con Vue

Sviluppare un pulsante o una modale all'interno di una pagina con una struttura profonda è lento. Storybook consente di visualizzare un componente da solo, modificare le sue props in tempo reale e individuare le regressioni visive prima che arrivino nell'app.

Installazione con un solo comando

Esegua il comando init nel progetto Vue 3 esistente. Rileva Vite, installa le dipendenze e crea la configurazione e alcune story di esempio.

// terminal
// npx storybook@latest init

Cosa crea init

L'inizializzatore aggiunge una cartella di configurazione .storybook/, file *.stories.* di esempio e script npm. Rileva automaticamente la configurazione Vue 3 + Vite.

// .storybook/main.ts
// .storybook/preview.ts
// src/stories/*.stories.ts (examples)

La configurazione main.ts

.storybook/main.ts è la configurazione principale: indica dove si trovano le story, quali addon caricare e quale framework usare. Per Vue 3 + Vite, il framework è @storybook/vue3-vite.

// .storybook/main.ts
import type { StorybookConfig } from "@storybook/vue3-vite"

const config: StorybookConfig = {
  stories: ["../src/**/*.stories.@(js|ts)"],
  addons: ["@storybook/addon-essentials"],
  framework: { name: "@storybook/vue3-vite", options: {} },
}
export default config

Il glob delle story

L'array stories indica a Storybook dove trovare i file delle story usando pattern glob. Lo adatti alla struttura delle Sue cartelle.

stories: [
  "../src/**/*.stories.@(js|jsx|ts|tsx)",
]

Il framework vue3-vite

Il pacchetto del framework integra Storybook nella configurazione Vite esistente, così alias, plugin e gestione dei CSS corrispondono alla compilazione reale dell'app.

framework: {
  name: "@storybook/vue3-vite",
  options: {},
}

Il file preview.ts

.storybook/preview.ts configura l'impostazione globale applicata a ogni story: decorator globali, parametri e importazione dei CSS globali.

// .storybook/preview.ts
import type { Preview } from "@storybook/vue3"
import "../src/assets/main.css"

const preview: Preview = {
  parameters: {
    controls: { matchers: { color: /color/i } },
  },
}
export default preview

Decorator e plugin globali

Se i componenti richiedono un router o Pinia, li registri una sola volta in preview.ts tramite setup, così ogni story può accedervi senza codice ripetuto per ogni story.

// .storybook/preview.ts
import { setup } from "@storybook/vue3"
import { createPinia } from "pinia"

setup((app) => {
  app.use(createPinia())
})

Esecuzione del server di sviluppo

Avvii Storybook localmente con il comando dev. La convenzione prevede la porta 6006.

// terminal
// npm run storybook
// or directly:
// storybook dev -p 6006

Creazione di uno Storybook statico

Per il deployment, crei un sito statico che può essere ospitato ovunque. In genere la CI lo pubblica per la revisione del design.

// terminal
// storybook build
// outputs to storybook-static/

Verifica rapida

Verifichi la Sua comprensione della configurazione di Storybook per Vue 3.

Riepilogo

Ha configurato Storybook per Vue 3:

  • Storybook crea e documenta i componenti in isolamento.
  • npx storybook@latest init crea la configurazione e gli esempi.
  • .storybook/main.ts configura il glob stories, gli addon e il framework @storybook/vue3-vite.
  • .storybook/preview.ts gestisce l'impostazione globale (CSS, decorator e plugin come Pinia).
  • Lo avvii con storybook dev -p 6006; crei un sito statico con storybook build.

Domande Frequenti

La lezione «Configurazione di Storybook per Vue 3» è gratuita?

Sì — il testo completo di «Configurazione di Storybook per Vue 3» è 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 «Configurazione di Storybook per Vue 3»?

npx storybook@latest init, .storybook/config, main.js, directory stories, avvio. 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 1 di 4.

Quanto tempo richiede la lezione «Configurazione di Storybook per Vue 3»?

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