Vue Academy · Lekcja

Pisanie stories komponentów

Format CSF3, eksport domyślny (title, component), eksporty nazwane jako stories oraz args.

Lekcja 2 z 413 kroki

Pisanie stories komponentów to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Stories opisują stany komponentu

Story przedstawia jeden stan komponentu — określony zestaw propsów i treści. Przycisk może mieć stories Primary, Secondary i Disabled. Storybook renderuje każdy z nich jako osobny przykład, który można przeglądać.

CSF3: nowoczesny format

Storybook używa formatu Component Story Format 3 (CSF3). Plik zawiera jeden eksport domyślny opisujący komponent oraz nazwane eksporty dla każdego story. Są to zwykłe obiekty JavaScript/TypeScript — z minimalną ilością dodatkowego kodu.

Eksport domyślny (meta)

Eksport domyślny to obiekt meta. Minimalnie zawiera on title (ścieżkę w panelu bocznym) oraz dokumentowany component.

import Button from "./Button.vue"

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

title porządkuje panel boczny

Wartość title używa ukośników do tworzenia hierarchii folderów w panelu bocznym Storybooka. "Forms/Inputs/TextField" zagnieżdża element na trzech poziomach.

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

Nazwane eksporty to stories

Każdy nazwany eksport to wariant story. Nazwa eksportu staje się etykietą story w panelu bocznym.

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

Obiekt args

Obiekt args story dostarcza wartości propsów. Storybook przekazuje je do komponentu, a panel Controls pozwala zmieniać je na żywo.

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

Wiele wariantów za pomocą args

Można ponownie używać tego samego komponentu w różnych stories, zmieniając tylko args. Każdy eksport renderuje komponent z innymi propsami.

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

Domyślne args w meta

Umieść wspólne args w obiekcie meta; poszczególne stories powinny nadpisywać tylko wartości, które się różnią. Dzięki temu stories pozostają zgodne z zasadą DRY.

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

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

Stories z slotami za pomocą render

W przypadku treści przekazywanej przez sloty udostępnij funkcję render, która zwraca template używający komponentu. Pozwala to obsłużyć przypadki, których nie da się wyrazić za pomocą samych args.

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

Automatycznie generowana dokumentacja za pomocą tags

Dodaj tags: ["autodocs"] do obiektu meta, aby Storybook automatycznie wygenerował stronę dokumentacji komponentu na podstawie jego propsów i stories.

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

Co tworzy autodocs

Strona autodocs zawiera propsy komponentu (nazwę, typ i wartość domyślną), wyświetla każdy story jako interaktywny przykład oraz renderuje komentarze z opisami — to zawsze aktualna specyfikacja bez żadnych dodatkowych plików.

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat pisania stories.

Odpowiedz w interaktywnej lekcji

Podsumowanie

Nauczono się pisać stories komponentów:

Story przedstawia jeden stan komponentu; CSF3 używa eksportów obiektów.
Eksport domyślny to meta z polami title (ścieżką w panelu bocznym) i component.
Każdy nazwany eksport to wariant story; args dostarcza jego wartości propsów.
Wspólne args umieszcza się w meta, a stories nadpisują pozostałe wartości. Do slotów należy używać render.
tags: ["autodocs"] automatycznie generuje stronę dokumentacji.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 42
Lekcje: 156

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Pisanie stories komponentów” jest bezpłatna?

Tak — pełny tekst „Pisanie stories komponentów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Pisanie stories komponentów”?

Format CSF3, eksport domyślny (title, component), eksporty nazwane jako stories oraz args. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Pisanie stories komponentów”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Konfiguracja Storybook dla Vue 3
Pisanie stories komponentów
Controls, actions i args
Dodatki Storybook i testowanie dostępności

← Powrót do Vue Academy