入门
Storybook Vue 教程
安装
storybook依赖脚手架的一些默认配置，所以先用vue-cli创建项目，然后用下面的命令自动安装。
npx -p @storybook/cli sb init --type vue
# 安装最新版本
npx storybook@latest init
# 或手动安装
npm install @storybook/vue3 @storybook/addon-essentials vue-loader@^16.0.0 --save-dev安装后项目目录多出两个文件夹.storybook和stories
├── .storybook // storybook配置相关文件
│ ├── main.js // 入口文件，配置插件，webpack等
│ └── preview.js // 其他配置信息
│
└── src
└── stories // 组件story书写的核心位置启动项目
npm run storybook打包项目
npm run build-storybook配置
引入 ElementPlus 和 pinia 插件
//preview.ts
import type { Preview } from '@storybook/vue3'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import pinia from '@/stores'
import { setup } from '@storybook/vue3'
setup((app) => {
app.use(ElementPlus).use(pinia)
})
const preview: Preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
};
export default preview;Vue 类项目添加 storybook
上面步骤基本一致，唯一不同的就是组件的写法，不一致。 Button.vue:
<template>
<button
type="button"
@click="onClick"
:style="{ backgroundColor, color: '#fff' }"
>
{{ label }}
</button>
</template>
<script>
export default {
name: 'Button',
props: {
label: {
type: String,
required: true,
},
backgroundColor: {
type: String,
default: '#f69',
},
},
methods: {
onClick() {
this.$emit('onClick');
},
},
};
</script>Button.stories.js:
import Button from './Button';
// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
export default {
title: 'Button',
component: Button
};
// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
const Template = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { Button },
template: '<Button @onClick="onClick" v-bind="$props" />'
});
export const Red = Template.bind({});
Red.args = {
label: 'Red',
backgroundColor: 'red'
};
export const Blue = Template.bind({});
Blue.args = {
label: 'Blue',
backgroundColor: 'blue'
};