Vuejs2.x + Storybook + ElementUI 实践总结

[ZhangCheng-zh]

样式预处理器配置

Storybook 默认是不能编译 scss 编码的，需要在 .storybook/main.js 配置一下相关 loader

"webpackFinal": async (config, { configType }) => {
    config.resolve = {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        '@': path.join(__dirname, '../src'),
      }
    }
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    })

    return config
  }

公共样式引入

ScSelect 除了组件内局部样式外如果还有公共样式才能正确展示，可以在 .storybook/preview.js 中引入

import '@/styles/index.scss'

ArgTypes

ArgTypes 是 Storybook 中用于指定Args行为的特性。 通过指定一个参数的类型或者提供默认值，可以在渲染出来的组件中 control 其行为属性。argTypes 通常有两种呈现形式：

自动推断
Storybook 在开发者构建 .stories.js 文件并写完基础模板时就能根据原来组件里写属性已经注释自动推断出来，如：

props: {
    /** 是否设置为自动匹配 */
    filterable: {
      type: Boolean,
      default: true
    },
    /** 请求下拉列表的接口url，当传入resData时不会发送接口请求（故此时不需传入url） */
    url: {
      type: String,
      default: ''
    },
    /** 是否设置为不可编辑 */
    disabled: {
      type: Boolean,
      default: false
    },
  }

注释 自动推断是通过原组件中的注释来生成上图中 description 列的文案，具体怎么设置注释参考 vue + storybook 注释说明，如slots的description