Question

我已经使用vue create设置了一个新的Vue项目，并安装了Storybook-一切正常。

然后我安装了storybook-addon-designs，并按照自述文件添加了故事，但这在控制台中给我带来以下错误：h is not defined。

这是我的文件：

stories/2-PageTitle.stories.js：

import { withDesign } from 'storybook-addon-designs'
import {Button} from '../src/components/Button'

export default {
  title: 'My stories',
  component: Button,
  decorators: [withDesign]
}

export const myStory = () => <Button>Hello, World!</Button>

myStory.story = {
  name: 'My awesome story',
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File'
    }
  }
}

babel.config.js：


module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

.storybook/main.js：


module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['storybook-addon-designs']
};

src/components/Button.vue：

<template>
  <button>
  {{ label }}
  </button>
</template>

<script>
export default {
  name: 'Button',
  props: {
    label: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
button {
  background: red;
}
</style>

有人在这里看到我在做什么错吗？

完整代码在这里（我曾经做过一个沙盒，但是因为它使用了Storybook，这似乎是更好的方法？）：https://github.com/A7DC/storybookvueaddonstest

Answer 1

storybook-addon-designs的作者提出以下建议：

您必须替换export

const myStory = () => <Button>Hello, World!</Button>

您需要将此行（React story）更改为Vue的一行。例如，

export const myStory = () => ({
  components: { Button },
  template: '<Button>Hello, World!</Button>'
})

更新后的答案-

import { withDesign } from "storybook-addon-designs";
import Button from "../src/components/Button";

export default {
  title: "My Stories",
  decorators: [withDesign],
};

export const myStory = () => ({
  components: { Button },
  template: "<Button> Hello, World!</Button >",
});

myStory.story = {
  name: "My awesome story",
  parameters: {
    design: {
      type: "figma",
      url: "https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File",
    },
  },
};

h未定义是什么意思？

1 个答案: