在Scalingo,我们是一个平台即服务,我们最近改进了所有客户使用的仪表板。

我们能够加快我们的开发过程,这要归功于

今天我将分享我们在 Vue 项目中使用 Storybook 的最佳技巧和窍门。

本文最初发表于 Scalingo.com。您可以在此处找到完整的文章。

提示1:使用js格式,而不是mdx

Storybook 提供两种故事格式:js 和mdx(mdx 是 md 文件,具有 js 部分的能力)。我们最初选择 mdx 格式是因为它改进了文档功能。原来这是个坏主意。

事实上,我们没有使用 mdx 的额外功能,并且使用 mdx 进行维护特别困难。

对于我们想要记录的几个点,最好有单独的 md 文件,并使用“更标准”的 js 格式。原因是,尤其是使用 Vue.js,您将拥有更少的错误和更多的 js 格式在线文档。

提示 2:Storybook 中的 VueDevTools(快速破解)

VueDevTools在画布模式下不起作用,但如果画布在新选项卡中打开(左上角第二个图标),则可以使用。

技巧 3:分离组件的关注点(控制器/视图......)

我们选择分离组件的关注点。

具体来说,我们有三种组件类型:控制器、视图、设计系统。控制器组件是唯一被授权与模型(服务、商店)交互的组件。因此,这允许我们将所有其他组件作为“纯”视觉组件,仅通过“哑”道具进行导航。

它可以通过哑平面 json 文件轻松创建/更新复杂的视图组件

import Projects from "@/components/views/Projects";
import currentUser from "@/stories/data/currentUser.json";
import props from "./props.json";
export default {
  title: "Views/Main/Apps",
  component: Projects,
};
const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Projects },
  template: `<Projects v-bind="$props">`,
});
export const Default = Template.bind({});
Default.args = {
  user: currentUser,
  ...props,
};

进入全屏模式 退出全屏模式

如果您的组件已经在浏览器中运行,您可以使用 VueDevTools/component 选项卡复制道具并将它们粘贴到 json 文件中。

[](https://res.cloudinary.com/practicaldev/ image/fetch/s--uyzFovHc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://www.datocms-assets.com/36416/1621237728-vuedevtools-component-tab.png%3Ffit%3Dcrop%26fm %3Djpg%26w%3D825)

提示 4:在您的故事周围添加 StoriesWrapper

在您的故事周围添加包装器至少有两个不同的原因。

在我们的例子中,我们使用嵌套路由。所以最终的视图组件,在真实的应用程序中,包裹着 N 个组件。如果您有路由器,则视图至少包含在 App 组件中。 Stories wrapper 在这里重现了这个“包装”的环境。

第二个原因:包装器还可以帮助您精细控制画布参数。

这里是我们的 preview.js 配置,还有两个额外的工具栏菜单“i18n”和“主题”

// config/storybook/preview.js
export const globalTypes = {
  language: {
    name: "i18n",
    description: "i18n selector",
    defaultValue: "en",
    toolbar: {
      items: ["en", "fr"],
    },
  },
  theme: {
    name: "theme",
    description: "theme selector",
    defaultValue: "light",
    toolbar: {
      items: ["light", "dark"],
    },
  },
};
const appSbProvider = (Story, context) => ({
  template: "<story/>",
  data() {
    return { theme: context.globals.theme, language: context.globals.language };
  },
});
export const decorators = [appSbProvider];

进入全屏模式 退出全屏模式

以及我们如何在我们所有的故事包装中调用它的孩子

// src/components/others/storybook/AppSb.vue
export default {
  name: "AppSb",
  ...
  created() {
    this.changeLanguage(this.$root.$children[0].language);
    this.changeTheme(this.$root.$children[0].theme);
  },
  ...
};

进入全屏模式 退出全屏模式

它允许我们安装“类似应用程序”的视图故事,而不需要太多努力。并通过 Storybook 工具栏控制它们。

// The Storybook wrapper
import WelcomeSb from "@/components/others/storybook/WelcomeSb";
// The component we want to storify
import Projects from "@/components/views/Projects";
// Flat Props in json files
import currentUser from "@/stories/data/currentUser.json";
import props from "./props.json";
export default {
  title: "Views/Main/Apps",
  component: Projects,
};
const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Projects, WelcomeSb },
  template: `<WelcomeSb selectedRoute="Projects"><Projects v-bind="$props"></Projects></WelcomeSb>`,
});
export const Default = Template.bind({});
Default.args = {
  user: currentUser,
  ...props,
};

进入全屏模式 退出全屏模式

结论

这里有 4 个来自 Scalingo 的提示,因为我们是 Storybook 的重度用户!

随时在我们的博客上的 Vue.js 项目中查看我们关于 Storybook](https://scalingo.com/blog/guide-storybook-vue-js)的完整[指南,或在dev.to上的这篇博文的第一部分

如果您需要托管而无需处理服务器,请随时查看我们!