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

Posted 2021-09-06 。。

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面板内将打印，并显示传值内容。