Storybook Vue 附加元件

一個 Storybook 附加元件，允許以原生 Vue 語法撰寫 stories，並將其編譯為 Storybook 的 CSF 格式。

範例：Button.stories.vue

<script setup lang="ts">
import Button from './Button.vue'
</script>
<template>
  <Stories
    title="Stories in Vue format 😍"
    :component="Button"
  >
    <Story title="Primary">
      <Button
        background="#ff0"
        label="Button"
      />
    </Story>
    <Story title="Secondary">
      <Button
        background="#ff0"
        label="😄👍😍💯"
      />
    </Story>
    <Story title="Tertiary">
      <Button
        background="#ff0"
        label="📚📕📈🤓"
      />
    </Story>
  </Stories>
</template>

功能

• 以慣用的 Vue 範本撰寫 stories，告別基於字串的範本，如 storybookjs/storybook#9768 中所希望的。
• 用於撰寫 story 範本的語法高亮和完整的編輯器支援 (包含 Volar)
• 在自訂的 docs 區塊中，直接在您的 stories.vue 檔案中新增 markdown 文件 (詳情請見下方)
• 要顯示的元件只需宣告一次 (透過 <Stories :component="...">)，而不必為每個 story 宣告
• 與 Storybook 的簡單整合和自動 Vite 支援
• 輕巧：Vue stories 會在執行時轉譯成普通的 CSF stories，開銷極小

此套件目前處於早期 alpha 階段，僅支援基本的 Storybook 功能。與更多進階功能和附加元件的相容性正在進行中。如果您遇到任何錯誤或缺少整合，請開啟一個 issue。

以慣用 Vue 範本撰寫 stories 的方式，深受出色的 Histoire 啟發。

安裝

注意：目前僅支援 @storybook/vue3-vite 建構器（或已棄用的 @storybook/builder-vite 0.2.7 或更高版本）。

1. 將 storybook-vue-addon 新增到您的開發依賴項中。

   # npm
   npm install --save-dev storybook-vue-addon
   
   # yarn
   yarn add -D storybook-vue-addon
   
   # pnpm
   pnpm add -D storybook-vue-addon
   

2. 在 .storybook/main.js 中，將 *.stories.vue 新增到 stories 模式中，並將 storybook-vue-addon 作為一個附加元件。

     "stories": [
       "../src/**/*.stories.mdx",
   -    "../src/**/*.stories.@(js|jsx|ts|tsx)"
   +    "../src/**/*.stories.@(js|jsx|ts|tsx|vue)"
     ],
     ...
     "addons": [
       "@storybook/addon-essentials",
   +   "storybook-vue-addon"
     ],
   
   

新增文件

您可以使用自訂的 docs 區塊，直接在您的 story SFC 中為元件新增文件。

<template>Define your stories here as above</template>

<docs lang="md">
import { Canvas } from '@storybook/blocks';

# Documentation

Everything in one place. Isn't it great?

You can render stories in the docs using the `<Canvas>` component.

<Canvas />
</docs>

您可以為您的文件使用 Markdown 的易讀語法 (例如 # 標題)、包含 stories，並在檔案中的任何位置自由嵌入 JSX 元件區塊。有關詳細資訊，請參閱 Storybook 文件。與標準 MDX 文件頁面有一些微小的差異

• 不需要 <Meta of=...> 標籤。
• 您不需要匯入 stories 檔案。只需依名稱參照已定義的 stories。例如

  <template>
    <Stories>
      <Story title="Unchecked">
        <Checkbox label="Unchecked" />
      </Story>
    </Stories>
  </template>
  <docs>
    import { Canvas } from '@storybook/blocks';
    <Canvas of={Unchecked} />
  </docs>
  

Typescript 支援

Volar 應該能夠自動識別 Stories 和 Story 元件。也可以從 storybook-vue-addon 匯入它們

import type { Stories, Story } from 'storybook-vue-addon/core'

手動使用

如果因為任何原因，您在建置管道中處理 Storybook stories，您可能希望首先將 Vue stories 轉譯為傳統的 CSF stories，方法是將 storybook-vue-addon 新增到您的建置中。

// vite.config.ts
import VueStories from 'storybook-vue-addon/vite'

export default defineConfig({
  plugins: [
    VueStories({
      /* options */
    }),
  ],
})

範例：playground/

// rollup.config.js
import VueStories from 'storybook-vue-addon/rollup'

export default {
  plugins: [
    VueStories({
      /* options */
    }),
  ],
}

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('storybook-vue-addon/webpack')({
      /* options */
    }),
  ],
}

// nuxt.config.js
export default {
  buildModules: [
    [
      'storybook-vue-addon/nuxt',
      {
        /* options */
      },
    ],
  ],
}

此模組適用於 Nuxt 2 和 Nuxt Vite

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('storybook-vue-addon/webpack')({
        /* options */
      }),
    ],
  },
}

// esbuild.config.js
import { build } from 'esbuild'
import VueStories from 'storybook-vue-addon/esbuild'

build({
  plugins: [VueStories()],
})

💻 開發

• 複製此儲存庫
• 使用 corepack enable 啟用 Corepack (對於 Node.js < 16.10，請使用 npm i -g corepack)。
• 使用 pnpm install 安裝依賴項。

命令

• build：建置所有內容。輸出可以在 dist 中找到。
• build:types：為 Story 和 Stories 元件建置類型，以簡化 components.d.ts 檔案中的開發。
• dev：以監看模式建置。
• lint：檢查 eslint 和 prettier 問題。
• test：執行測試。
• example:vite：開啟範例 storybook（使用 vite）。您需要先執行 build 或 dev。
• play：執行遊樂場（目前未使用）。
• release：將新版本發佈到 npm。

贊助商

感謝 Chromatic 提供視覺測試平台，協助我們審閱 UI 變更並捕捉視覺迴歸。