0Pricing
Vue Academy · Ders

Vue 3 için Storybook Kurulumu

npx storybook@latest init, .storybook/config, main.js, stories dizini ve çalıştırma.

Vue 3 için Storybook Kurulumu, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Storybook Nedir?

Storybook, kullanıcı arayüzü bileşenlerini yalıtılmış biçimde geliştirmeye yarayan bir çalışma ortamıdır. Her bileşeni uygulamanızın dışında, tüm durumlarıyla görüntüler, belgeler ve görsel olarak test edersiniz — üstelik bunların tümü özel bir tarayıcı sanal alanında gerçekleşir.

Vue ile Neden Kullanılır?

Bir düğme veya iletişim kutusunu derin bir sayfanın içinde geliştirmek yavaştır. Storybook, bir bileşeni tek başına görmenizi, özelliklerini anında değiştirmenizi ve görsel gerilemeleri uygulamaya ulaşmadan yakalamanızı sağlar.

Tek Komutla Kurulum

Mevcut Vue 3 projenizde başlatma komutunu çalıştırın. Vite'ı algılar, bağımlılıkları kurar ve yapılandırma ile örnek story'leri oluşturur.

// terminal
// npx storybook@latest init

init Neler Oluşturur?

Başlatıcı bir .storybook/ yapılandırma klasörü, örnek *.stories.* dosyaları ve npm betikleri ekler. Vue 3 + Vite kurulumunu otomatik olarak algılar.

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

main.ts Yapılandırması

.storybook/main.ts, story'lerin nerede bulunduğunu, hangi eklentilerin yükleneceğini ve hangi çatının kullanılacağını belirleyen temel yapılandırmadır. Vue 3 + Vite için çatı @storybook/vue3-vite değeridir.

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

stories Glob Deseni

stories dizisi, glob kalıplarını kullanarak Storybook'a story dosyalarını nerede bulacağını söyler. Klasör düzeninize uyacak şekilde ayarlayın.

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

vue3-vite Çatısı

Çatı paketi, Storybook'u mevcut Vite yapılandırmanıza bağlar; böylece takma adlar, eklentiler ve CSS işleme gerçek uygulama derlemenizle aynı şekilde çalışır.

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

preview.ts Dosyası

.storybook/preview.ts, her story'ye uygulanan genel kurulumu yapılandırır: genel dekoratörler, parametreler ve genel CSS'nin içe aktarılması.

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

Genel Dekoratörler ve Eklentiler

Bileşenlerinizin bir yönlendiriciye veya Pinia'ya ihtiyacı varsa, her story'nin erişebilmesi için bunları preview.ts içinde setup aracılığıyla bir kez kaydedin — story başına tekrar eden başlangıç koduna gerek kalmaz.

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

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

Geliştirme Sunucusunu Çalıştırma

Storybook'u geliştirme komutuyla yerel olarak başlatın. Kullanılan varsayılan bağlantı noktası 6006'dır.

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

Statik Storybook Oluşturma

Dağıtım için istediğiniz yerde barındırabileceğiniz statik bir site oluşturun. CI, tasarım incelemesi amacıyla bunu genellikle yayımlar.

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

Kısa Kontrol

Vue 3 için Storybook kurulumunu anlayıp anlamadığınızı kontrol edin.

Özet

Vue 3 için Storybook'u kurdunuz:

  • Storybook, bileşenleri yalıtılmış biçimde oluşturur ve belgeler.
  • npx storybook@latest init, yapılandırmayı ve örnekleri oluşturur.
  • .storybook/main.ts, stories glob desenini, eklentileri ve @storybook/vue3-vite çatısını belirler.
  • .storybook/preview.ts, genel kurulumu (CSS, dekoratörler ve Pinia gibi eklentiler) yönetir.
  • storybook dev -p 6006 ile çalıştırın; storybook build ile statik bir site oluşturun.

Sıkça Sorulan Sorular

“Vue 3 için Storybook Kurulumu” dersi ücretsiz mi?

Evet — “Vue 3 için Storybook Kurulumu” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Vue 3 için Storybook Kurulumu” dersinde ne öğreneceğim?

npx storybook@latest init, .storybook/config, main.js, stories dizini ve çalıştırma. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Vue 3 için Storybook Kurulumu” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Vue 3 için Storybook Kurulumu
  2. Bileşen Hikâyeleri Yazma
  3. Kontroller, Actions ve Args
  4. Storybook Eklentileri ve Erişilebilirlik Testleri
← Vue Academy Sayfasına Dön