vue3-ts-storybook：理解storybook、实践 / 前端组件库

原创已于 2025-06-20 11:31:01 修改 · 2.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2023-08-17 23:31:30 首次发布

前端专栏收录该内容

331 篇文章

订阅专栏

本文介绍了如何在Vue3.3项目中集成和使用Storybook进行组件管理和测试，包括安装步骤、配置文件、故事编写、部署过程以及相关概念如组件驱动开发(CDD)。

一、理解 storybook

Storybook是一个开源的工具，可以帮助前端开发者更好地构建、测试和展示组件。
具体来说，Storybook可以做以下几件事情：

1、为每个组件提供一个独立的页面，可以快速展示或调试组件。

2、管理多个组件，按需展示和测试，帮助开发者更好地理解和组织组件库。

3、可以用各种状态（例如不同的props和事件触发）的快照测试组件，保证在不同状态下组件的正确性。

4、提供一些插件（如addon-knobs）可以方便地测试组件的可配置性。

5、可以将组件的使用文档集成在一起，让组件的使用者更好地理解组件的用法和API。

Storybook是一个非常实用的工具，它可以帮助前端开发者更好地管理和测试组件，同时提高开发效率和代码质量。

二、vue3.3 + ts 项目，实践

2.1、node环境 > 18.x

2.2、安装 storybook

npx storybook@latest init

pnpm add --dev @storybook/vue

2.3、安装完成后自动打开页面

2.4、.storybook 文件夹

在项目根目录下创建了一个名为.storybook的文件夹，并在其中创建一个配置文件main.ts、preview.ts
配置文件的内容可以参考如下：

2.5、src目录下增加了stories目录

src/stories是存放组件故事（stories）的文件夹路径，.stories.ts是故事文件的后缀名。如果你的文件夹和后缀名有所不同，需要把配置文件中的路径和后缀名修改为你自己的。

2.6、故事的属性

每个故事都需要包含一个用于展示故事的title属性和一个展示组件的component属性。

2.7、package.json文件，增加storybook启动命令

注意这里设置的端口号，Storybook的默认端口是6006

2.8、启动Storybook

pnpm run storybook

Storybook会自动查找所有的组件故事，并在浏览器中展示出来。

随着使用的深入，你还可以使用Storybook的各种插件和功能（例如插件addon-knobs）帮助你更好地测试组件。

启动成功

三、部署

3.1、pnpm run build-storybook 生成静态资源

pnpm run build-storybook

3.2、进入目录storybook-static，使用http-server启动服务

3.3、启动成功，在真实服务器上同理。

四、调整 .storybook 目录位置

在前端插件 Storybook 中，.storybook 目录是用于存放 Storybook 配置的核心目录，默认情况下，Storybook 会自动识别项目根目录下的 .storybook 文件夹来加载配置。该目录的位置是可以调整的，但需要一些额外的配置步骤。

在 package.json 的 scripts 中，可以自定义启动命令

{
  "scripts": {
    "storybook": "STORYBOOK_CONFIG_DIR=./custom-storybook-config start-storybook -p 6006"
  }
}

五、过程记录

5.1、npx sb init 安装与 pnpm add --dev @storybook/vue 安装相同吗

不完全相同。

npx是npm的衍生工具，可以临时使用安装的node_modules中的bin工具。
sb init是storybook的初始化命令，初始化storybook。
pnpm add是pnpm工具的添加依赖包命令，--dev表示是开发依赖包，@storybook/vue是storybook的vue框架的入口包

npx sb init 是创建一个完整的 Storybook 项目，它将生成一个包含配置文件、样板文件和一些示例组件的文件结构。

pnpm add --dev @storybook/vue 只是向现有项目中添加 Storybook 依赖项，您需要手动创建配置文件和组件来使用它。

因此，如果您想从头开始构建 Storybook 项目，则应使用 npx sb init ，如果您只是想将 Storybook 添加到现有项目中，则应使用 pnpm add --dev @storybook/vue 。