0Pricing
Vue Academy · Pelajaran

Menyiapkan Storybook untuk Vue 3

npx storybook@latest init, .storybook/config, main.js, direktori stories, serta cara menjalankannya.

Menyiapkan Storybook untuk Vue 3 adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Apa Itu Storybook?

Storybook adalah lingkungan kerja untuk membangun komponen UI secara terisolasi. Anda merender setiap komponen dalam setiap keadaan di luar aplikasi, mendokumentasikannya, dan mengujinya secara visual — semuanya di lingkungan uji peramban khusus.

Mengapa Menggunakannya dengan Vue?

Mengembangkan tombol atau modal di dalam halaman yang bertingkat dalam itu lambat. Storybook memungkinkan Anda melihat komponen secara mandiri, mengubah propertinya secara langsung, dan menemukan regresi visual sebelum mencapai aplikasi.

Instalasi dengan Satu Perintah

Jalankan perintah init di proyek Vue 3 yang sudah ada. Perintah ini mendeteksi Vite, memasang dependensi, serta menyiapkan config dan cerita contoh.

// terminal
// npx storybook@latest init

Yang Dibuat oleh Inisialisasi

Penginisialisasi menambahkan folder config .storybook/, berkas *.stories.* contoh, dan skrip npm. Perintah ini secara otomatis mendeteksi penyiapan Vue 3 + Vite.

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

Konfigurasi main.ts

.storybook/main.ts adalah config inti: tempat cerita berada, pengaya yang dimuat, dan kerangka kerja yang digunakan. Untuk Vue 3 + Vite, kerangka kerjanya adalah @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

Pola Pencocokan Berkas untuk Cerita

Array stories memberi tahu Storybook tempat menemukan berkas cerita menggunakan pola pencocokan berkas. Sesuaikan pola tersebut dengan tata letak folder Anda.

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

Kerangka Kerja vue3-vite

Paket kerangka kerja ini menghubungkan Storybook ke config Vite yang sudah ada, sehingga alias, pengaya, dan penanganan CSS sesuai dengan build aplikasi sebenarnya.

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

Berkas preview.ts

.storybook/preview.ts mengonfigurasi penyiapan global yang diterapkan ke setiap cerita: dekorator global, parameter, dan pengimporan CSS global.

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

Dekorator dan Pengaya Global

Jika komponen memerlukan perute atau Pinia, daftarkan sekali di preview.ts melalui setup agar setiap cerita dapat mengaksesnya — tanpa kode berulang untuk setiap cerita.

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

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

Menjalankan Server Pengembangan

Mulai Storybook secara lokal dengan perintah pengembangan. Port yang umum digunakan adalah 6006.

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

Membangun Storybook Statis

Untuk penerapan, bangun situs statis yang dapat di-host di mana saja. CI biasanya menerbitkannya untuk peninjauan desain.

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

Pemeriksaan Singkat

Periksa pemahaman Anda tentang penyiapan Storybook untuk Vue 3.

Ringkasan

Anda telah menyiapkan Storybook untuk Vue 3:

  • Storybook membangun dan mendokumentasikan komponen secara terisolasi.
  • npx storybook@latest init menyiapkan config dan contoh.
  • .storybook/main.ts menetapkan pola pencocokan stories, pengaya, dan kerangka kerja @storybook/vue3-vite.
  • .storybook/preview.ts menangani penyiapan global (CSS, dekorator, dan pengaya seperti Pinia).
  • Jalankan dengan storybook dev -p 6006; bangun situs statis dengan storybook build.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menyiapkan Storybook untuk Vue 3” gratis?

Ya — teks lengkap “Menyiapkan Storybook untuk Vue 3” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menyiapkan Storybook untuk Vue 3”?

npx storybook@latest init, .storybook/config, main.js, direktori stories, serta cara menjalankannya. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Menyiapkan Storybook untuk Vue 3” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Menyiapkan Storybook untuk Vue 3
  2. Menulis Story Komponen
  3. Controls, Actions, dan Args
  4. Addon Storybook dan Pengujian Aksesibilitas
← Kembali ke Vue Academy