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