前端组件开发环境storybook

因为工作中有几个Vue组件开发的需要,打算将组件开发相关的工具环境整理出来。想了好几个方案,比如gulp监听文件变化进行编译、基于webpack-dev-server实现一个构建工程等等。但因为实现上不够优雅、需要自己开发一个展览工具等等原因放弃了。

后来,知乎上刷到了一篇有关storybook和Vue.js的介绍,瞬间种草🌈。

什么是storybook

storybook介绍

简单地说,storybook就是提供组件开发和预览的工具,有较好的UI和丰富的插件。

因为个人的技术栈是Vue.js,下面记录下Vue.js工程中storybook的接入使用。

Vue.js工程接入storybook

Vue-cli 3

  1. 启动vue官方gui工具并进入工程

    1
    $ vue ui

    vue ui

  2. 在“插件”页面添加storybook插件(如果不使用vue ui,可以npx -p @storybook/cli sb init --type vue添加插件)

    搜索"storybook"后点击“加号”添加。

    vue ui插件页
    vue ui添加插件

  3. 保存配置

    插件安装完成后,可以自动加入storybook的配置代码,如下图继续即可。

    配置图1
    配置图2

    如此,storybook & vue-cli3配置完成。

    变更文件

    运行script storybook:serve可以查看效果。

    storybook demo

代码仓库: https://github.com/suyi91/storybook-vue-elementui-demo

vue-cli 2(或者Webpack工程)

参照官方教程即可,基本vue-cli 3中的变动文件相同。

其他

更多内容可以参考后续的post。