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

5次阅读

共计 1853 个字符，预计需要花费 5 分钟才能阅读完成。

介绍：

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

官网
装置：
```
  npm install @storybook/vue -S 
```

批改 package.json, 配置一个 scripts。

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

批改目录构造：

在我的项目根目录下新建一个.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' // 组件目录名}

运行：
```
   npm run storybook
```
这时不出意外的话，storybook 已顺利运行，界面呈现。

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)
    }
  }
})

成果：此时界面下方或者右方会呈现一个面板，可在其中动静配置批改相干属性，实时预览。

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')
  }
  ...
})
...