搜索了一下网上关于如何在storybook中引入基于element-ui二次封装后的组件的资料几乎没用或者比较老旧，而且storybook初看文档有点不太友好，自己硬着头皮按照文档测试了一遍自己之前写的UI组件引入到storybook，在踩过一些坑后整理一下供大家参考。
一、storybook的作用1、可以避免公司前端重复造轮子统一放在storybook上，其他前端可以在这里看到其他成员是否实现过自己将要实现的组件。2、提升组件通用性storybook内的组件可以与业务解耦。3、可以自动生成使用文档和示例
image.png4、轻松实现结构化组件文档5、方便手动在线测试
二、如何在vue2.x+element-ui中引入1、按照storybook文档安装即可；我的是vue2项目，因此运行即可npx sb init2、根据要求安装所需要的插件。
a、安装插件时注意兼容性：https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.mdb、插件大全https://storybook.js.org/addons/这里我安装一下storysource插件，可以方便查看源码。image.pngnpm i @storybook/addon-storysource --dev在.storybook/main.js addons部分添加"@storybook/addon-storysource" 如下
module.exports = { "stories": ["../src/**/*.stories.mdx","../src/**/*.stories.@(js|jsx|ts|tsx)" ], "addons": ["@storybook/addon-links","@storybook/addon-essentials","@storybook/addon-storysource" // 新增 ]}3、启动storybooknpm run storybook4、按照示例编写你自己的组件xxxx.stories.js文件并放置在storybook的示例文件目录下(src/stories)
DialogWithBtn.stories.js
import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import Vue from "vue";Vue.use(ElementUI)import MyDialogWithBtn from './DialogWithBtn.vue';export default { title: 'Example/DialogWithBtn', component: MyDialogWithBtn, argTypes: {visible: { control: { type: 'boolean'},description:'控制是否可见' },title:{ control: { type: 'text'},description:'设置对话框顶部标题' },onCancelEvent:{description:'点击取消后的回调事件'},onSureEvent:{description:'点击确定后的回调事件',action: 'clicked'},'update:visible':{description:'同步visible数值（该参数不涉及修改，可忽略）'},default:{description:'底部按钮之前的默认插槽（该参数不涉及修改，可忽略）'},footer:{description:'底部按钮footer具名插槽（该参数不涉及修改，可忽略）'}, },};const Template = (args, { argTypes }) => ({ props: Object.keys(argTypes), components: { MyDialogWithBtn }, template: '点我显示对话框 对话框啊', methods:{onShowDialog(){ this.visible=true console.log('展示了')}, }});export const dialogWithBtn = Template.bind({});dialogWithBtn.args = { title: '对话框1',};// export const dialogWithBtn2 = Template.bind({});// dialogWithBtn2.args = {//title: '对话框2',// };值得指出的是我这里偷了懒，直接全部引入了element-ui，你们可以也可以按需引入
import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import Vue from "vue";Vue.use(ElementUI)DialogWithBtn.vue 我也直接放这个目录了，你可以放置你实际的目录位置中并正确引入即可。DialogWithBtn.vue
取 消确 定export default { name: 'dialog-with-btn', props: {visible: { default: false, type: Boolean,}, }, computed: {visibleDialog: { get() {return this.visible }, set(val) {this.$emit('update:visible', val) },}, }, methods: {cancelOp() { this.$emit('onCancelEvent') this.visibleDialog = false;},sureOp() { this.$emit('onSureEvent') this.visibleDialog = false;}, }, // data:{ // return { //visibleDialog // } // }} .dialog-footer-ct{margin: 10px auto;text-align: center; }5、进入http://localhost:6006/?path=/story/example-dialogwithbtn--dialog-with-btn 查看效果
image.png6、各个面板介绍image.png三、注意点·1、默认触发事件及回调事件需要以on开头才可以在Actions上看到事件及传参的数据(storybook/vue6.2.8没有这个要求了)。
image.png这个的话，大家看preview.js就知道为啥了。image.png2、记得在DialogWithBtn.stories.js中引入element-ui并注册，否则将报错3、示例组件的参数记得填全且属性值记得别写死而应该与argTypes保持一致。image.png4、demo已上传至 github https://github.com/have-not-BUG/vue-element-ui-storybook-demo