1

我曾经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

4

1 回答 1

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",
    },
  },
};
于 2020-04-16T08:26:52.333 回答