使用 vuetify 2 设置故事书

Question

我正在使用 storybook 和 vuetify 2 设置项目。只需将 vuetify 导入我的 storybook 配置文件即可使组件正常工作，但颜色和主题不起作用，并且在添加装饰器 v-app 时出现以下错误： “index.js:49 TypeError：无法读取未定义的属性‘dark’”

import { configure, addDecorator } from '@storybook/vue'
import { themes } from '@storybook/theming'
import Vue from 'vue'
import Vuetify, { VApp } from 'vuetify/lib'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import colors from 'vuetify/lib/util/colors';

Vue.component('v-app', VApp)

Vue.use(Vuetify, {
  iconfont: 'md',
  theme: {
    themes: {
      light: {
        primary: colors.purple,
        secondary: colors.grey.darken1,
        accent: colors.shades.black,
        error: colors.red.accent3,
      },
      dark: {
        primary: colors.purple
      },
    }
  }
})

addDecorator(() => ({
  template: '<v-app><story/></v-app>',
}));


const req = require.context('../../src/stories', true, /.stories.js$/)

function loadStories() {
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)

Answer 1

只是将默认装饰器添加到我的故事中。

import vuetify from '@/plugins/vuetify';     
.addDecorator(() => ({
     vuetify,
     template: '<v-app><story/></v-app>'
}))

这里的 vuetify import 是 vuetify 生成的默认插件

Answer 2

长期以来，我在使用 Storybook 5.3.19 设置 vuetify 2.3.3 时遇到了麻烦。 我不确定，但 vue-cli-plugins 似乎没有更新 通过 vue-cli 使用 vuetify 处理故事书。

所以我通过 webpack 让 storybook 在没有 vue-cli 的情况下运行。 我想在这里分享一下，希望能节省你一些时间。

（这样我可以全局加载所有 vuetify 组件）

// .storybook/main.js
const path = require('path');

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-knobs'],

  webpackFinal: async (config, { configType }) => {

    // Use Sass loader for vuetify components
    config.module.rules.push({
      test: /\.s(a|c)ss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    config.module.rules.push({
      resolve: {
        alias: {
          '@': path.resolve(__dirname, '../src'),
          vue: 'vue/dist/vue.js',
          'vue$': 'vue/dist/vue.esm.js',          
        },
      },
    });

    // Return the altered config
    return config;
  },
};

// .storybook/vuetify_storybook.js
import Vue from 'vue';
import Vuetify from 'vuetify'; // loads all components
import 'vuetify/dist/vuetify.min.css'; // all the css for components
import config from '../src/plugins/vuetifyConfig'; // basic config with theme

Vue.use(Vuetify);

export default new Vuetify(config);

// .storybook/preview.js
import { addDecorator } from '@storybook/vue';
import vuetify from './vuetify_storybook';

addDecorator(() => ({
  vuetify,
  template: `
    <v-app>
      <v-main>
        <v-container fluid >
          <story/>
        </v-container>
      </v-main>
    </v-app>
    `,
}));

我尝试了没有 sass-loader 的 webpack 配置，因为我直接从 dist 文件夹使用 vuetify css，但是没有用。

为 Storybook 6.3.9 编辑

我现在必须删除旋钮插件才能让它再次运行我可能稍后会重新添加它。

// .storybook/main.js changes to this

const path = require('path');

module.exports = {
  "stories": [
    "../stories/**/*.stories.@(js)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Use Sass loader for vuetify components
    config.module.rules.push({
      test: /\.s(a|c)ss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // config.module.rules.push({
    //   test: /\.(png|jpg)$/,
    //   use: ['file-loader'],
    //   include: path.resolve(__dirname, '../'),
    // });

    config.module.rules.push({
      resolve: {
        alias: {
          '@': path.resolve(__dirname, '../src'),
          vue: 'vue/dist/vue.js',
          'vue$': 'vue/dist/vue.esm.js',          
          cesium: path.resolve(__dirname, '../node_modules/cesium/Source'),
        },
      },
    });

    // Return the altered config
    return config;
  },
};

// .storybook/preview.js now looks like this

import vuetify from './vuetify_storybook';

export const parameters = {};

export const decorators = [
  (Story) => ({
    vuetify,
    template: `
    <v-app style="font-family: 'Raleway, sans-serif' !important;">
      <v-main>
        <v-container fluid >
          <story/>
        </v-container>
      </v-main>
    </v-app>
    `,
  }),
];

Answer 3

我在设置 Vuetify 2 和 Storybook 时遇到问题。最终拼凑出一个种子站点：https://github.com/stephenst/vue-storybook-vuetify-seed/