Vuetify in Storybook

应用程序设计可能很复杂，在字体、排版、间距和颜色方面有许多选择。Vuetify通过提供预先设计好的、可主题化的组件，基于Google的Material Design指南，简化了这一点，从而实现了统一的外观。

Storybook是一个前端工作台，用于独立构建UI。通过结合Storybook和Vuetify，您可以更快地构建UI，而无需进行繁琐的工作。从Storybook 7.0开始，借助开箱即用的Vite支持，这将更加容易。本文将向您展示如何集成这两种工具，为使用Vuetify构建用户界面创建一个强大而灵活的开发环境。

在本文中，我们将解释如何

• 🔌 设置Vuetify与Storybook
• 🧱 在您的组件中使用Vuetify
• 🎨 一键切换Vuetify主题

如果您想查看此食谱的示例代码，请查看GitHub上的示例仓库。让我们开始吧！

注册Vuetify到Storybook

要开始，您需要将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应用程序中。

使用Vuetify组件

让我们更新一些示例组件，使用Vuetify代替。我们将使用./src/stories/button.vue中的Button组件。

目前，它看起来不是很*Vuetiful*，所以让我们做一些改变。将./src/stories/Button.vue的内容替换为以下代码：

<template>
  <v-btn type="button" color="primary" @click="onClick" :variant="variant" :size="size">{{ label }}</v-btn>
</template>

<script>
  import { reactive, computed } from 'vue';

  export default {
    name: 'my-button',
    props: {
      label: {
        type: String,
        required: true,
      },
      primary: {
        type: Boolean,
        default: false,
      },
      size: {
        type: String,
        validator: function (value) {
          return ['small', 'large'].indexOf(value) !== -1;
        },
      },
      backgroundColor: {
        type: String,
      },
    },
    emits: ['click'],
    setup(props, { emit }) {
      props = reactive(props);
      return {
        onClick() {
          emit('click');
        },
        variant: computed(() => props.primary ? 'flat' : 'outlined'),
      }
    },
  };
</script>

现在回头看Storybook，我们的按钮已经是Vuetify按钮了。它甚至在页面级的故事中也发生了变化。

使用globalTypes添加主题切换工具

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 (see below)
      items: [
        { value: "light", title: "Light", left: "🌞" },
        { value: "dark", title: "Dark", left: "🌛" },
      ],
      // Change title based on selected value
      dynamicTitle: true,
    },
  },
};

这段代码将创建一个新的工具栏下拉菜单，用于为您的故事选择所需的主题。

添加一个withVuetifyTheme装饰器

需要有一种方法来告诉Vuetify使用工具栏中选择的主题。这可以通过装饰器来完成。

下面我在.storybook中创建了一个名为withVuetifyTheme.decorator.js的新文件，它将获取我们的全局主题值并更新Vuetify的当前主题。

// .storybook/withVeutifyTheme.decorator.js
import { useTheme } from "vuetify";

export const DEFAULT_THEME = "light";

export const withVuetifyTheme = (story, context) => {
  const globalTheme = context.globals.theme || DEFAULT_THEME;

  return {
    components: { story },
    setup() {
      const theme = useTheme();

      theme.global.name.value = globalTheme;

      return {
        theme,
      };
    },
    template: `<story />`,
  };
};

现在将这个装饰器提供给Storybook来包装我们的故事。为此，请将装饰器添加到.storybook/preview.js中的装饰器数组中。

// .storybook/preview.js
import { setup } from "@storybook/vue3";
import { registerPlugins } from "../src/plugins";
import { withVuetifyTheme } from "./withVuetifyTheme.decorator";

setup((app) => {
  // Registers your app's plugins into Storybook
  registerPlugins(app);
});

/* snipped for brevity */

export const decorators = [withVuetifyTheme];

总结

Vuetify提供了大量现成的Material Design组件，让构建*Vuetiful*的UI变得轻而易举。只需几步，您就可以在Storybook中设置Vuetify，创建一个强大的开发环境。

参与进来

如果您在工作中也使用Vuetify，我们很乐意您帮助我们创建一个自动应用上述配置的插件。加入维护者在Discord中，以参与其中，或跳转到插件文档。