Vue Academy · 课时

编写组件故事

CSF3 格式、默认导出（title、component）、作为故事的具名导出，以及 args

第 2 / 4 课13 个步骤

编写组件故事 是 CoddyKit 上的免费 Vue Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

故事描述组件状态

一个故事记录组件的一种状态——一组特定的属性和内容。一个按钮可能有 Primary、Secondary 和 Disabled 故事。Storybook 会将每个故事渲染为独立且可浏览的示例。

CSF3：现代格式

Storybook 使用组件故事格式 3（CSF3）。一个文件包含一个描述组件的默认导出，以及每个故事对应的具名导出。它只是普通的 JavaScript/TypeScript 对象，样板代码极少。

默认导出（元数据）

默认导出是元数据对象。它至少包含一个 title（侧边栏路径）以及要编写文档的 component。

import Button from "./Button.vue"

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

title 组织侧边栏

title 使用斜杠在 Storybook 侧边栏中创建文件夹层级。"Forms/Inputs/TextField" 会嵌套三层。

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

具名导出就是故事

每个具名导出都是一个故事变体。导出名称会成为侧边栏中的故事标签。

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

args 对象

故事的 args 对象提供属性值。Storybook 会将这些值传递给组件，而控制面板允许您实时调整它们。

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

通过 args 创建多个变体

只需更改 args，即可在多个故事中复用同一个组件。每个导出都会使用不同的属性渲染组件。

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

在元数据上设置默认 args

将共享的 args 放在元数据对象上；单个故事只覆盖不同的部分。这样可以保持 DRY。

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

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

通过 render 创建带插槽的故事

对于插槽内容，请提供一个 render 函数，返回一个使用该组件的模板。这样可以涵盖仅凭 args 无法表达的情况。

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

使用标签自动生成文档

将 tags: ["autodocs"] 添加到元数据中，即可让 Storybook 根据组件的属性和故事自动生成文档页面。

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

autodocs 会生成什么

autodocs 页面会列出组件的属性（名称、类型、默认值），将每个故事显示为实时示例，并渲染描述注释——无需额外文件即可获得一份持续更新的规范。

快速检查

检查您对编写故事的理解。

在交互式课程中回答

回顾

您学习了如何编写组件故事：

故事记录组件的一种状态；CSF3 使用对象导出。
默认导出是元数据，包含 title（侧边栏路径）和 component。
每个具名导出都是一个故事变体；args 提供其属性值。
共享的 args 放在元数据上；故事覆盖其余部分。对于插槽，请使用 render。
tags: ["autodocs"] 会自动生成文档页面。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 42
课程: 156

免费开始学习查看完整课程

常见问题解答

「编写组件故事」课时是免费的吗？

是的 — 「编写组件故事」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「编写组件故事」这节课中我会学到什么？

CSF3 格式、默认导出（title、component）、作为故事的具名导出，以及 args 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「编写组件故事」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy