使用 vuetify 2 设置故事书

Question

我正在使用故事书和 vuetify 2 建立一个项目。只需将 vuetify 导入我的故事书配置文件即可使组件正常工作，但颜色和主题不起作用，当添加装饰器 v-app 时，我得到以下信息错误： "index.js:49 TypeError: Cannot read property 'dark' of undefined"

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导入是vuetify默认生成的插件

Answer 2

我在设置 Vuetify 2 和 Storybook 时遇到了问题。结束拼凑种子网站：https://github.com/stephenst/vue-storybook-vuetify-seed/

Answer 3

我在使用 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，但没有用。

为 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>
    `,
  }),
];

使用 vuetify 2 设置故事书

Setting up storybook with vuetify 2

javascript

vue.js

vuetify.js

storybook

为 Storybook 6.3.9 编辑