Storybook操作文档

一、Storybook的安装和配置

1. 安装

通过命令 初始化StoryBook环境,storybook自动检测开发环境，安装依赖

$ npx -p @storybook/cli sb init

2. 更新目录结构

image

通过 npx sb init 安装storybook添加的目录

├─ .storybook // 预设的配置文件
│     ├─ main.js // 入口文件 
│     ├─ preview.js // 控制Stories的呈现、全局资源的加载 
├─ stories // 示例模版
│     ├─ Button.stories.js // 控制Stories的呈现、全局资源的加载 
│     ├─ Input.stories.js // 控制Stories的呈现、全局资源的加载 

3. package.json 添加命令

 "scripts": { 
     "storybook": "start-storybook -p 6006", // 启动本地服务以预览 
     "build-storybook": "build-storybook" // 构建 
 },

4. 入口配置 .storybook/main.js

storybook的webpack和项目的webpack是完全分离的,要在main.js里配置webpackFinal

const path = require('path')
module.exports = {
      stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
      addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
      framework: '@storybook/vue3',
      core: {
        builder: '@storybook/builder-webpack5'
      },
      webpackFinal: async config => {
        config.resolve.alias['@utils'] = path.resolve(__dirname, '../packages/utils')
        config.resolve.extensions.push('.ts', '.tsx')
        return config
      }
      // staticDirs: ["../public"], //静态资源访问
}

5. 依赖配置 .storybook/preview.js

该文件引入全局依赖，定义StoryBook渲染相关的配置

因为示例代码中依赖 lucid-theme ，展现的页面没有样式，所以，StoryBook渲染需要额外引入lucid-theme主题

import '@dingdao/lucid-theme/lib/theme-default.css' //<== 引入全局样式

import elementPlus from 'element-plus'; //<== 引入第三方组件库
import { app } from '@storybook/vue3'   //<== 导入Storybook提供的Vue支持
app.use(elementPlus);                   //<== 安装

// 全局装饰器 decorators 装饰器的作用主要是统一修饰组件展示区域的样式，例如：设置居中、margin、padding 的距离等等。包括全局装饰器和组件装饰器
export const decorators = [(story) => ({
   components: { story },
   template: '<div style="margin: 3em;padding: 3em;text-align:center;"><story /></div>'
})];

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/
    },
    expanded: true, //controls 展示更多字段
  }
}

6. 全局管理配置 .storybook/manager.js

import { addons } from "@storybook/addons";
import theme from "./themes/theme";

addons.setConfig({
  theme: theme
})

7. 全局主题配置 .storybook/themes/theme.js

import { create } from '@storybook/theming';
export default create({
  base: 'light',
  brandTitle: 'Lucid-UI', // logo不展示时，替代文本alt
  // brandImage: '/logo.png',
  brandImage: 'https://lucent.dev.dingdaoos.com/img/lucid-ui-logo.679258d4.png',
});

二、组件的Stroybook编写

1. 创建 *.stories.js

2. 引入组件

3. 配置左侧菜单

4. 配置控制门面板属性(argTypes)

5. 配置Template模板

6. 配置左侧子菜单

import LuInput from '../packages/components/input'

export default {
  title: 'Example/输入框Input',
  component: LuInput,
  decorators: [() => ({ template: '<div style="margin: 3em;width:240px"><story /></div>' })], //组件装饰器 就是套在组件外层的一个容器, 不需要可以不加.
  argTypes: {
    modelValue: {
      name: 'modelValue', //属性的名称,可以不写,默认是字段名
      control: { type: 'text' }, //关联属性的控件类型
      defaultValue: '', // Control 字段的默认值
      description: '组件的值', //设置属性的描述
      required: true, //将属性设置为可选或必需 >>> 没什么用,主要受字段内props字段影响
      //控制面板详情表格
      table: {
        type: {
          summary: '[string | number]' //提供该类型的简短版本
          // detail: 'something' //提供类型的扩展版本。
        },
        defaultValue: {
          //控制面板默认值字段
          summary: '' //提供默认值的简短描述
          // detail: 'Something' //提供更长版本的默认值描述。
        }
      }
    },
    maxlength: {
      name: 'maxlength',
      control: { type: 'Number' },
      defaultValue: 'text',
      description: `原生属性，最大输入长度`,
      options: ['text', 'password'],
      table: {
        type: {
          summary: 'Number'
        }
      }
    },
    type: {
      name: 'type',
      control: { type: 'inline-radio' },
      defaultValue: 'text',
      description: `组件的可选类型 =>  'text' | 'password'`,
      options: ['text', 'password'],
      table: {
        type: {
          summary: 'string'
        },
        defaultValue: {
          summary: '"text"'
        }
      }
    }
  }
}
const Template = args => ({
  components: { LuInput },
  setup() {
    return { args }
  },
  template: '<lu-input v-bind="args"></lu-input>'
})

export const Primary = Template.bind({})
Primary.storyName = '基础用法'

export const Primary2 = Template.bind({})
Primary2.args = {
  type: 'password',
}
Primary2.storyName = '密码框'

export const Primary3 = Template.bind({})
Primary3.args = {
  state: 'warning',
}
Primary3.storyName = '提醒状态'

export const Primary4 = Template.bind({})
Primary4.args = {
  type: 'text',
  state: 'danger',
  size: 'oversize'
}
Primary4.storyName = '超大警告'

三、运行部署

命令行执行：

npm run storybook

image

通过build命令 生成静态页面，直接部署静态页面即可

npm run build-storybook

image

四、附录:

1. Props属性

无法复制加载中的内容

2. Controls类型

无法复制加载中的内容