0Pricing
Vue Academy · Lekcja

Konfiguracja Storybook dla Vue 3

npx storybook@latest init, .storybook/config, main.js, katalog stories oraz uruchamianie.

Konfiguracja Storybook dla Vue 3 to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 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.

Czym jest Storybook?

Storybook to warsztat do budowania komponentów interfejsu użytkownika w izolacji. Każdy komponent jest renderowany w każdym stanie poza aplikacją, dokumentowany i testowany wizualnie — wszystko w przeznaczonym do tego środowisku uruchamianym w przeglądarce.

Dlaczego warto używać go z Vue?

Tworzenie przycisku lub okna modalnego wewnątrz głęboko zagnieżdżonej strony jest powolne. Storybook pozwala wyświetlić komponent samodzielnie, na żywo zmieniać jego propsy i wykrywać regresje wizualne, zanim trafią do aplikacji.

Instalacja za pomocą jednego polecenia

Uruchom polecenie init w istniejącym projekcie Vue 3. Wykryje ono Vite, zainstaluje zależności oraz utworzy konfigurację i przykładowe stories.

// terminal
// npx storybook@latest init

Co tworzy init

Inicjalizator dodaje folder konfiguracji .storybook/, przykładowe pliki *.stories.* oraz skrypty npm. Automatycznie wykrywa konfigurację Vue 3 + Vite.

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

Konfiguracja main.ts

.storybook/main.ts to główna konfiguracja: określa, gdzie znajdują się stories, które dodatki są ładowane oraz którego frameworka należy użyć. W przypadku Vue 3 + Vite jest to @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

Wzorzec glob dla stories

Tablica stories informuje Storybook, gdzie szukać plików stories za pomocą wzorców glob. Dostosuj ją do układu folderów w projekcie.

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

Framework vue3-vite

Pakiet frameworka integruje Storybook z istniejącą konfiguracją Vite, dzięki czemu aliasy, pluginy i obsługa CSS odpowiadają rzeczywistemu procesowi budowania aplikacji.

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

Plik preview.ts

.storybook/preview.ts konfiguruje globalną konfigurację stosowaną do każdego story: globalne dekoratory, parametry oraz importowanie globalnego CSS.

// .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

Globalne dekoratory i pluginy

Jeśli komponenty wymagają routera lub Pinia, zarejestruj je jednokrotnie w pliku preview.ts za pomocą setup, aby każdy story miał do nich dostęp — bez powtarzania kodu dla poszczególnych stories.

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

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

Uruchamianie serwera deweloperskiego

Uruchom Storybook lokalnie za pomocą polecenia deweloperskiego. Standardowo używany jest port 6006.

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

Budowanie statycznego Storybooka

Na potrzeby wdrożenia zbuduj statyczną witrynę, którą można hostować w dowolnym miejscu. W ramach CI jest ona często publikowana do przeglądu projektu.

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

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat konfiguracji Storybooka dla Vue 3.

Podsumowanie

Skonfigurowano Storybooka dla Vue 3:

  • Storybook buduje i dokumentuje komponenty w izolacji.
  • npx storybook@latest init tworzy konfigurację i przykłady.
  • .storybook/main.ts definiuje wzorzec glob w stories, dodatki oraz framework @storybook/vue3-vite.
  • .storybook/preview.ts obsługuje globalną konfigurację (CSS, dekoratory i pluginy, takie jak Pinia).
  • Uruchom Storybook za pomocą storybook dev -p 6006, a statyczną witrynę zbuduj za pomocą storybook build.

Często zadawane pytania

Czy lekcja „Konfiguracja Storybook dla Vue 3” jest bezpłatna?

Tak — pełny tekst „Konfiguracja Storybook dla Vue 3” 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 „Konfiguracja Storybook dla Vue 3”?

npx storybook@latest init, .storybook/config, main.js, katalog stories oraz uruchamianie. Ć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 1 z 4.

Ile czasu zajmuje lekcja „Konfiguracja Storybook dla Vue 3”?

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

  1. Konfiguracja Storybook dla Vue 3
  2. Pisanie stories komponentów
  3. Controls, actions i args
  4. Dodatki Storybook i testowanie dostępności
← Powrót do Vue Academy