Что значит h не определено? - PullRequest
Новая
       85

Что значит h не определено?

1 голос
/ 16 апреля 2020

Я использовал 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>

Кто-нибудь может увидеть, что я здесь делаю не так?

Полный код здесь (я бы сделал Песочницу, но поскольку он использует Сборник рассказов, это выглядит лучше кстати?): https://github.com/A7DC/storybookvueaddonstest

1 Ответ

1 голос
/ 16 апреля 2020

Автор 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",
    },
  },
};
...