在基于vue的组件库内使用Storybook搭建组件使用文档

Storybook for Vue

1. 介绍：

   storybook是一个可视化组件展示平台，该工具可让开发者独立的创建可以交互展示的UI组件，能有组织和高效地构建UI组件。

   官网

2. 安装：

     npm install @storybook/vue -S 

3. 修改package.json, 配置一个scripts。

   {
     "scripts": {
    "storybook": "start-storybook -p 6006" // 指定运行在6006端口
     }
   }

4. 修改目录结构：

   • 在项目根目录下新建一个.storybook文件夹，在内部新建一个main.js文件

       |---- .storybook
         |-- main.js,
       ....
       |---- src
       |---- package.json

   • 在main.js中写入内容：

       module.exports = {
         stories: ["../src/stories/**/*.stories.js", "../src/stories/*.stories.js"], // 对src下的XXX.stories.js进行注册
       }

   • 在src文件夹下新建一个stories，新建对应的XXX.stories.js, 一个文件夹代表一个大目录，可再建立小目录。

     // test.stories.js
     import Test from '../components/Test'
     export default { title: '测试组件' } // 大目录的名称
     export const toStorybook = () => ({
       components: { Test }, // 注册组件
       template: '<Test/>' // 调用
     })
     
     toStorybook.story = {
       name: 'Test' // 组件目录名
     }
     

5. 运行：

      npm run storybook

   这时不出意外的话，storybook已顺利运行，界面出现。

6. addon-knobs插件 - 动态交互展示组件属性

   • 安装:

     npm install @storybook/addon-knobs -S

   • 引入：

     在main.js中的addons引入该插件

       module.exports = {
         stories: ["../src/stories/**/*.stories.js", "../src/stories/*.stories.js"],
         addons: ['@storybook/addon-knobs/register']
       }

   • 使用：

     在test.stories.js中配置使用：
     import { withKnobs, text, color, boolean } from '@storybook/addon-knobs'

     import 
     ...
       export default { title: '测试组件', decorators: [withKnobs] }
     ...

   • 组件调用：

     export const toStorybook = () => ({
       components: { Test }, // 注册组件
       template: '<Test :text="text" :color="color" :show="show"/>' // 调用
       props: {
         text: {
           default: text('文字', 'Hello Storybook')
         },
         color: {
           default: color('颜色', '#000')
         },
         show: {
           default: boolean('是否显示', true)
         }
       }
     })

   • 效果：此时界面下方或者右方会出现一个面板，可在其中动态配置修改相关属性，实时预览。

7. addon-actions插件：显示事件触发效果以及查看传值。

   • 安装：

       npm install @storybook/addon-actions -S

   • 引入：

     在main.js中的addons引入该插件:

     ...
     addons:[ '@storybook/addon-knobs/register', '@storybook/addon-actions/register' ]
     ...

   • 使用：

     在XXX.stories.js中引入

     import { action } from '@storybook/addon-actions'
     ...
     export const toStorybook = () => ({
       components: { Test }, // 注册组件
       template: '<Test @showClick="showClick"/>', // 调用
       methods: {
         showClick: action('showClick')
       }
       ...
     })
     ...

   • 效果：此时在界面下方或者上方将出现一个actions面板，在showClick事件触发时，actions面板内将打印，并显示传值内容。