Vue 中如何使用 Storybook？

推荐答案

在 Vue 中使用 Storybook 的步骤如下：

1. 安装 Storybook
   在 Vue 项目中安装 Storybook：

   npx sb init --builder @storybook/builder-vite

2. 配置 Storybook
   Storybook 会自动检测 Vue 项目并生成配置文件。如果需要手动配置，可以在 .storybook/main.js 中调整配置：

   module.exports = {
     stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
     addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
     framework: '@storybook/vue3',
   };

3. 创建 Stories
   在 src/components 目录下创建 .stories.js 文件，例如 Button.stories.js：

   -- -------------------- ---- -------
   ------ ------ ---- ---------------
   
   ------ ------- -
     ------ -----------------
     ---------- -------
   --
   
   ----- -------- - ------ -- --
     ----------- - ------ --
     ------- -
       ------ - ---- --
     --
     --------- -------- ------------- ----
   ---
   
   ------ ----- ------- - ------------------
   ------------ - -
     ------ -------- --------
   --

4. 运行 Storybook
   启动 Storybook：

   npm run storybook

5. 查看组件
   打开浏览器访问 http://localhost:6006，即可查看和交互式测试 Vue 组件。

本题详细解读

1. Storybook 的作用

Storybook 是一个用于开发和测试 UI 组件的工具。它允许开发者在隔离的环境中构建和展示组件，支持实时交互和文档生成。

2. 为什么选择 Storybook？

• 隔离开发：组件可以在独立环境中开发和测试，避免与业务逻辑耦合。
• 文档化：自动生成组件文档，便于团队协作。
• 交互式测试：支持实时调整组件属性，快速验证 UI 行为。

3. 关键配置说明

• .storybook/main.js：Storybook 的主配置文件，用于定义 stories 路径、插件和框架。
• stories 文件：每个 .stories.js 文件对应一个组件的展示和测试用例。

4. 常见问题

• Vue 2 和 Vue 3 的兼容性：确保安装的 Storybook 版本与 Vue 版本匹配。
• 插件扩展：可以通过 addons 扩展 Storybook 功能，例如添加控件、文档等。

通过以上步骤，开发者可以高效地在 Vue 项目中使用 Storybook 进行组件开发和测试。