vue2 使用 storybook 6.x

背景说明

在已存在的项目中加入storybook支持, 且该项目是一个组件项目(用于封装独立组件, 供其他项目使用)

storybook版本: 6.x
vue版本: 2.x

引入storybook

项目根目录执行: npx sb init

• 执行完成之后, package.json中会增加storybook的devDependencies依赖, 且会新增storybook, build-storybook脚本, 用于开发时运行storybook和对storybook打包
• src目录下会生成stories文件夹, 里面是自动生成的示例, 可以一定程度上参考这些示例编写组件, 以便生成正确的 storybook 文档

运行storybook: npm run storybook

让storybook支持第三方依赖. 如: element-ui

.storybook/preview.js

// 让storybook能够识别第三方依赖. 如: element-ui
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

export const parameters = {
   
    actions: {
    argTypesRegex: '^on[A-Z].*' },
    controls: {
   
        expanded: true, // 该配置为true时, 会为每一个prop生成对应说明(如果有的话, 每个prop的说明应该写在/** xxx */中)
        matchers: {
   
            color: /(background|color)$/i,
            date: /Date$/
        }
    }
}

增加storybook的扫描目录

因为组件写在了packages目录, 对应组件的storybook也写在那里比较好, 因此需要增加扫描目录

.storybook/main.js

module.exports = {
   
    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)', '../packages/**/*.stories.mdx', '../packages/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: ['@storybook/addon-links', '@storybook/addon-essentials']
}
</