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

Storybook for Vue

介绍：
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.jsimport 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')  }  ...})...

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