h is not defined 是什么意思？

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 故事）更改为 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 is not defined 是什么意思？

What does h is not defined mean?

javascript

vue.js

storybook

figma