背景说明
在已存在的项目中加入storybook支持, 且该项目是一个组件项目(用于封装独立组件, 供其他项目使用)
storybook版本: 6.x
vue版本: 2.x
引入storybook
项目根目录执行: npx sb init
- 执行完成之后,
package.json中会增加storybook的devDependencies依赖, 且会新增storybook,build-storybook, 用于开发时运行storybook和对storybook打包 src目录下会生成stories文件夹, 里面是自动生成的示例, 可以一定程度上参考这些示例编写组件, 以便生成正确的storybook 文档
运行storybook: npm run storybook
让storybook支持第三方依赖. 如: element-ui
.storybook/preview.js
// 让storybook能够识别第三方依赖. 如: element-ui
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
expanded: true, // 该配置为true时, 会为每一个prop生成对应说明(如果有的话, 每个prop的说明应该写在/** xxx */中)
matchers: {
color: /(background|color)$/i,
date: /Date$/
}
}
}
增加storybook的扫描目录
因为组件写在了packages目录, 对应组件的storybook也写在那里比较好, 因此需要增加扫描目录
.storybook/main.js
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)', '../packages/**/*.stories.mdx', '../packages/**/*.stories.@(js|jsx|ts|tsx)'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials']
}
开始为自己的组件编写storybook
JsonForm.stories.js
import JsonForm from './JsonForm.vue'
export default {
title: '组件/JsonForm',
component: JsonForm
}
const Template = (args, { argTypes }) => ({
components: { JsonForm },
// 此处改成当前的写法, 而不要直接使用args, 否则可能会导致下面的JsonFormStory.args配置无效
props: Object.keys(argTypes),
template: '<JsonForm v-bind="$props"/>'
})
export const JsonFormStory = Template.bind({})
// 修改该storybook在界面左侧导航的名称, 如果不设置那么会是: Json Form Story
JsonFormStory.storyName = 'JsonForm'
JsonFormStory.args = {
/* 👇 这里可以设置自定义组件prop的初始值 */
formItemArrConfig: [{ prop: 'name', compName: 'el-input', label: '姓名', rules: [{ required: true, message: '请输入姓名' }] }]
}
其他补充说明
less/sass/alais问题可参考: 无星的前端之旅（六）—— Vue引入Storybook（一）
