时间戳

首页 > 解决方案 > Storybook nuxt build 不包括装饰器

vue.js - Storybook nuxt build 不包括装饰器

问题描述

TLDR：nuxt + 故事书 + vuetify 构建的问题

我使用 Nuxt.js、Vuetify 和 Storybook 创建了一个新项目。

Storybook 开发服务器运行良好，我只需在 nuxt 配置中添加一个装饰器：

// nuxt.config.js
storybook: {
    decorators: [
      // VApp decorator for Vuetify
      '<v-app><div><story/></div></v-app>',
    ],
  },

唯一的问题似乎是在运行构建时它不会加载装饰器，因此故事书不能正确地表示视觉方面。

// package.json
"storybook": "nuxt storybook",
"storybook:build": "nuxt storybook build"

注意：我确实使用了官方的nuxt 故事书

开发示例：

在此处输入图像描述

构建示例：

在此处输入图像描述

标签： vue.jsnuxt.jsvuetify.jsstorybook

解决方案

好的，所以我花了一些试验和错误，但我已经成功了。

1) 将 Vuetify 添加为插件

我们要做的第一件事是vuetify.js在插件目录中创建一个文件

.
├── plugins
│   └── vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify';
import colors from 'vuetify/es5/util/colors';
import { themes } from '~/config/themes';

import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

export default (ctx) => {
  const vuetify = new Vuetify({
    customVariables: ['~/assets/variables.scss'],
    treeShake: true,
    options: {
      customProperties: true,
    },
    theme: {
      themes: {
        light: {
          ...themes.light,
        },
      },
    },
  });
  ctx.app.vuetify = vuetify;
  ctx.$vuetify = vuetify.framework;
};

2) 更新 nuxt 配置以加载 Vuetify

在您nuxt.config.js确保删除 Vuetify 配置并将 vuetify 添加为插件，如下所示：

// nuxt.config.js
  plugins: ['@/plugins/vuetify.js'],

3) 添加故事书装饰器

添加一个 Vuetify 装饰器以在所有 Storybook 故事中支持 Vuetify。
在您nuxt.config.js添加以下装饰器

// nuxt.config.js

  storybook: {
    // Options
    decorators: [
      // VApp decorator for Vuetify
      `<v-app id='vuetify-storybook-decorator'><div><story/></div></v-app>`,
    ],
  },

4) 修复故事书的可见性

为了防止eatch story占据屏幕高度并允许在视图中呈现多于一个故事，我们将仅在storybook中覆盖默认的vuetify min-height；

在你的nuxt.config.js文件中加载一个storybook.scss这样的

// nuxt.config.js

 // Global CSS (https://go.nuxtjs.dev/config-css)
 css: ['@/assets/storybook.scss'],

并在您的资产文件夹中添加storybook.scss文件：

.
├── assets
│   └── storybook.scss

/* storybook.scss */

#vuetify-storybook-decorator {
  // Remove the storybook full height of all components
  .v-application--wrap {
    min-height: unset;
  }
}

5) 构建项目

将构建命令添加到您的package.json

// package.json
{
    "storybook": "nuxt storybook",
    "storybook:build": "nuxt storybook build"
}

然后在命令行中运行yarn storybook:build

构建将被放置在/storybook-static；您可以通过在该文件夹上运行任何服务器来查看构建，例如：

$ npx http-server ./storybook-static

就是这样，我希望它会有所帮助:)

推荐阅读