整合Vuetify與 Storybook 整合

Vuetify 是一個基於 Vue 的元件庫，設計靈感來自 Google 的 Material Design 規範。

先決條件

本食譜假設您已擁有一個使用 Vuetify v3 的 Vue 3 應用程式，並且剛使用入門指南設定了 Storybook 7.0 或更高版本。還沒有嗎？請按照 Vuetify 的安裝說明進行操作，然後執行

# Add Storybook:
npm create storybook@latest

1. 在 Storybook 中註冊 Vuetify

首先，您需要將 Vuetify 的字型載入器和插件新增至您的 Storybook 設定。為此，請將以下內容新增至您的 .storybook/preview.js 檔案

// .storybook/preview.js
 
import { setup } from '@storybook/vue3';
import { registerPlugins } from '../src/plugins';
 
setup((app) => {
  // Registers your app's plugins into Storybook
  registerPlugins(app);
});

在此，registerPlugins 載入 Vuetify 的字型，並在 Storybook 的 Vue 應用程式中註冊其所有元件。

2. 建立故事包裝元件

接下來，您需要將您的故事包裝在 Vuetify 的 v-app 元件中，以便使用其較大的版面配置元件，例如 v-app-bar。為此，請在 .storybook/ 中建立一個名為 StoryWrapper.vue 的元件

<!-- .storybook/StoryWrapper.vue -->
 
<template>
  <v-app>
    <v-main>
      <slot name="story"></slot>
    </v-main>
  </v-app>
</template>
 
<script></script>

3. 建立 `withVuetifyTheme` 裝飾器

現在建立一個 Storybook 裝飾器，將您的故事包裝在您的 StoryWrapper 元件中。

下面我在 .storybook 中建立了一個新檔案，名為 withVuetifyTheme.decorator.js。

// .storybook/withVeutifyTheme.decorator.js
 
import { h } from 'vue';
import StoryWrapper from './StoryWrapper.vue';
 
export const withVuetifyTheme = (storyFn, context) => {
  const story = storyFn();
 
  return () => {
    return h(
      StoryWrapper,
      {}, // Props for StoryWrapper
      {
        // Puts your story into StoryWrapper's "story" slot with your story args
        story: () => h(story, { ...context.args }),
      }
    );
  };
};

現在，在您的 preview.js 檔案中將此裝飾器提供給 Storybook。

// .storybook/preview.js
 
import { setup } from '@storybook/vue3';
import { registerPlugins } from '../src/plugins';
import { withVuetifyTheme } from './withVuetifyTheme.decorator';
 
setup((app) => {
  registerPlugins(app);
});
 
/* snipped for brevity */
 
export const decorators = [withVuetifyTheme];

4. 新增主題切換工具

Vuetify 預設提供淺色和深色主題，您可以覆寫或新增主題。為了充分利用您的故事，您應該有一種方法可以在所有主題之間切換。

若要新增我們的切換器，請在 .storybook/preview.js 中宣告一個名為 theme 的全域類型，並為其提供要選擇的支援主題列表。

// .storybook/preview.js
 
export const globalTypes = {
  theme: {
    name: 'Theme',
    description: 'Global theme for components',
    toolbar: {
      icon: 'paintbrush',
      // Array of plain string values or MenuItem shape
      items: [
        { value: 'light', title: 'Light', left: '🌞' },
        { value: 'dark', title: 'Dark', left: '🌛' },
      ],
      // Change title based on selected value
      dynamicTitle: true,
    },
  },
};

此程式碼將建立一個新的工具列選單，以選擇您故事所需的佈景主題。

5. 新增佈景主題提供器

需要有一種方法告訴 Vuetify 使用在工具列中選取的主題。這可以透過更新我們的 StoryWrapper 元件和 withVuetifyTheme 裝飾器來完成

首先，給予 StoryWrapper 一個 themeName 屬性，它可以提供給 v-app

<template>
  <v-app :theme="themeName">
    <v-main>
      <slot name="story"></slot>
    </v-main>
  </v-app>
</template>
 
<script>
export default {
  props: {
    themeName: String,
  },
};
</script>

現在將我們的全域 theme 變數作為屬性，透過我們的裝飾器傳遞給我們的 StoryWrapper 元件

// .storybook/withVeutifyTheme.decorator.js
 
import { h } from 'vue';
import StoryWrapper from './StoryWrapper.vue';
 
export const DEFAULT_THEME = 'light';
 
export const withVuetifyTheme = (storyFn, context) => {
  // Pull our global theme variable, fallback to DEFAULT_THEME
  const themeName = context.globals.theme || DEFAULT_THEME;
  const story = storyFn();
 
  return () => {
    return h(
      StoryWrapper,
      // give themeName to StoryWrapper as a prop
      { themeName },
      {
        story: () => h(story, { ...context.args }),
      }
    );
  };
};

參與其中

現在您已準備好將 Vuetify 與 Storybook 一起使用。🎉 查看範例儲存庫以快速開始。

如果您在工作中使用 Vuetify，我們很樂意您協助製作一個自動套用上述設定的擴充套件。加入 Discord 中的維護者以參與其中，或跳至擴充套件文件。

標籤

貢獻者

ShaunEvening