Vue Academy · Pelajaran

Menulis Cerita Komponen

Format CSF3, eksport lalai (title, component), eksport bernama sebagai stories, args.

Pelajaran 2 daripada 413 langkah

Menulis Cerita Komponen ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Cerita Menerangkan Keadaan Komponen

Satu cerita merakamkan satu keadaan komponen — set prop dan kandungan tertentu. Butang mungkin mempunyai cerita Primary, Secondary dan Disabled. Storybook memaparkan setiap satunya sebagai contoh berasingan yang boleh disemak imbas.

CSF3: Format Moden

Storybook menggunakan Format Cerita Komponen 3 (CSF3). Satu fail mempunyai satu eksport lalai yang menerangkan komponen dan eksport bernama bagi setiap cerita. Ia terdiri daripada objek JavaScript/TypeScript biasa — dengan kod berulang yang minimum.

Eksport Lalai (Metadata)

Eksport lalai ialah objek metadata. Sekurang-kurangnya, objek ini mempunyai title (laluan bar sisi) dan component yang didokumentasikan.

import Button from "./Button.vue"

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

title Menyusun Bar Sisi

title menggunakan tanda palang untuk mencipta hierarki folder dalam bar sisi Storybook. "Forms/Inputs/TextField" bersarang sehingga tiga aras.

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

Eksport Bernama Ialah Cerita

Setiap eksport bernama ialah variasi cerita. Nama eksport menjadi label cerita dalam bar sisi.

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

Objek args

Objek args sesuatu cerita membekalkan nilai sifat. Storybook menghantarnya kepada komponen, manakala panel Kawalan membolehkan anda mengubahnya secara langsung.

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

Pelbagai Variasi melalui args

Gunakan semula komponen yang sama merentas cerita dengan hanya mengubah args. Setiap eksport memaparkan komponen dengan sifat yang berbeza.

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

args Lalai pada Metadata

Letakkan args yang dikongsi pada objek metadata; cerita individu hanya mengatasi perkara yang berbeza. Ini memastikan cerita kekal DRY.

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

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

Cerita dengan Slot melalui render

Untuk kandungan berslot, sediakan fungsi render yang mengembalikan templat menggunakan komponen tersebut. Ini meliputi keadaan yang tidak dapat dinyatakan oleh args sahaja.

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

Dokumentasi Dijana Automatik dengan tags

Tambahkan tags: ["autodocs"] pada metadata supaya Storybook menjana halaman dokumentasi untuk komponen itu secara automatik berdasarkan sifat dan ceritanya.

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

Perkara yang Dihasilkan oleh autodocs

Halaman autodocs menyenaraikan sifat komponen (nama, jenis, nilai lalai), memaparkan setiap cerita sebagai contoh langsung dan merender komen penerangan — spesifikasi hidup tanpa fail tambahan.

Semakan Pantas

Semak pemahaman anda tentang penulisan cerita.

Jawab dalam pelajaran interaktif

Imbas Kembali

Anda telah mempelajari cara menulis cerita komponen:

Satu cerita merakamkan satu keadaan komponen; CSF3 menggunakan eksport objek.
Eksport lalai ialah metadata dengan title (laluan bar sisi) dan component.
Setiap eksport bernama ialah variasi cerita; args membekalkan nilai sifatnya.
Args yang dikongsi diletakkan pada metadata; cerita mengatasi selebihnya. Gunakan render untuk slot.
tags: ["autodocs"] menjana halaman dokumentasi secara automatik.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 42
Pelajaran: 156

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Menulis Cerita Komponen” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Menulis Cerita Komponen”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Menulis Cerita Komponen”?

Format CSF3, eksport lalai (title, component), eksport bernama sebagai stories, args. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Menulis Cerita Komponen” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Menyediakan Storybook untuk Vue 3
Menulis Cerita Komponen
Kawalan, Tindakan dan Argumen
Addon Storybook dan Ujian Kebolehcapaian

← Kembali ke Vue Academy