Question

我正在使用Storybook和vuetify 2建立一个项目。仅将vuetify导入到我的Storybook配置文件中可使组件正常工作，但是颜色和主题不起作用，并且在添加decorator 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

我在使用Storybook 5.3.19设置vuetify 2.3.3时遇到了很多麻烦。我不确定，但似乎vue-cli-plugins尚未更新通过vue-cli使用vuetify处理故事书。

所以我通过webpack在没有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，但没有用。

Answer 2

只是在我的故事中添加了默认装饰器。

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

其中vuetify导入是由vuetify生成的默认插件

Answer 3

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

使用Vuetify 2设置故事书

3 个答案: