StoryBook 快速上手

Kaede2025-08-212026-01-03

引言

Story 在我看来, 真的是一个特别好看, 特别方便的组件库, 或者其他文档生成的工具, 因为之前的各种组件库文档其实都是静态的, 只会提供什么长什么样, 不会直接允许修改.

但是这个 StoryBook, 就实现了类似的功能.

快速上手

首先, 我们需要创建一个项目, 比如:

1	yarn create vite

然后创建一个 Vue 3 的项目. 随后, 进入项目, 并且初始化一下 storybook:

1	npx sb init

确实, storyBook 的简写就是 sb, 华纳兄弟啊; 无论如何, 这里它会自动识别你的仓库是什么项目, 并且进行对应的初始化.

初始化结束, 可以看到目录:

这里上面的是配置文件, 我们几乎不需要进行配置; 只需要观察下面的 stories 目录即可.

其实就是对应的 Vue 组件加上一个 组件名.stories.ts, 那么这就好办了.

这里直接假设, 我们要把默认生成的 HelloWorld 组件加入到 stories 里面, 就可以创建一个同级的文件:

随后, 这里就需要注意了, 一个 story 的文件有一些必要的内容:

import type { Meta, StoryObj } from '@storybook/vue3-vite';
import HelloWorld from "./HelloWorld.vue"

// 必要, 需要声明组件的标题, 以及对应显示的组件是什么
const meta = {
    title: "Hello World",
    component: HelloWorld
} satisfies Meta<typeof HelloWorld>

export default meta
type Story = StoryObj<typeof meta>;

// 必要, 一个组件至少需要一个类型, 否则不会显示
export const Primary: Story = {
    args: {
        msg: "Hello"
    }
};