官方文档

https://storybook.js.org/docs/vue/get-started/introduction

一、安装

storybook依赖脚手架的一些默认配置，所以先用vue-cli创建项目，然后用下面的命令自动安装。

npx -p @storybook/cli sb init --type vue

安装后项目目录

项目多出两个文件夹.storybook和stories

├── .storybook      // storybook配置相关文件
│   ├── main.js     // 入口文件，配置插件，webpack等
│   └── preview.js  // 其他配置信息
│
└── src
     └── stories    // 组件story书写的核心位置

启动项目

npm run storybook

打包项目

npm run build-storybook

二、配置组件支持less

组件如果使用less的话，需进行额外配置，否则会报错。

配置文件 .storybook/main.js

增加webpackFinal属性

 "webpackFinal": async (config, {
    configType
  }) => {
    config.module.rules.push({
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'less-loader'],
    });

    return config;
  },

三、配置主题

自定义标题，替代默认storybook文案

配置主题

新建文件.storybook/myTheme.js

import {
  create
} from '@storybook/theming';

export default create({
  base: 'light',
  brandTitle: 'Olympic 2021',
  // brandUrl: 'https://example.com',
  // brandImage: 'https://place-hold.it/350x150',
});

新建文件.storybook/manager.js

import {
  addons
} from '@storybook/addons';
import myTheme from './myTheme.js'

addons.setConfig({
  theme: myTheme,
});

标题修改

四、左侧分组及中文显示

每个组件在stories下定义一个对应的xxx.stories.js的文件。

以默认demo的button举例，可以修改分组名和左侧列表的中文名。

button.sotries.js
展示效果

五、自定义canvas展示外层样式

组件展示的时候，可能需要外层父元素和一些特定样式
增加 decorators，以button为例，加背景展示

自定义canvas展示外层样式

export default {
  title: 'Example例子/Button按钮',
  component: MyButton,
  argTypes: {
    backgroundColor: { control: 'color' },
    size: { control: { type: 'select', options: ['small', 'medium', 'large'] } },
  },
  decorators: [() => ({
    template: '<div style="overflow:hidden;background:red;height: 200px"><story /></div>'
  })],
};

六、给组件展示时引入默认样式

直接在xxx.stories.js头部import样式文件

import '../style/tableDemo.css'

七、自定义markdown文档

使用插件

1. npm 安装 @storybook/addon-notes

2. 在.storybook下的 main.js增加配置

   
   main.js增加配置

3. 对应组件的xxx.stores.js文件中配置markdown文件，增加parameters配置

import tableItem from '../components/table.vue';
import {tableDataDefault} from '../datas/tableMockData.js'
import '../style/tableDemo.css'
// 引入markdown文件
import tableReadme from '../../docs/tableReadme.md'
export default {
  title: '基础组件/table',
  component: tableItem,
  // 配置markdown文件
  parameters: {
    notes: tableReadme,
  },
};

const Template = (args, {
  argTypes
}) => ({
  props: Object.keys(argTypes),
  components: {
    tableItem
  },
  template: '<table-item class="table_demo" v-bind="$props" />',
});
console.log(tableDataDefault)
export const Primary = Template.bind({});
Primary.args = tableDataDefault;

image.jpeg