@vue/cli 4 加入 storybook ui 搭建组件库演示网站

1. 初始化

npx -p @storybook/cli sb init

通过这个命令自动识别项目，并添加 @storybook/vue 等相关包，同时在根目录创建 .storybook 和 stories 目录，package.json 增加两个脚本命令。

// package.json
"scripts": {
	"storybook:dev": "start-storybook -p 6006",
    "storybook:build": "build-storybook"
},
"devDependencies": {
	"@storybook/addon-actions": "^5.3.19",
    "@storybook/addon-links": "^5.3.19",
    "@storybook/addons": "^5.3.19",
    "@storybook/vue": "^5.3.19",
}

2. 配置 less，添加 addon-docs 和 addon-viewport

yarn add -D @storybook/addon-docs @storybook/addon-viewport

// .storybook/main.js
const path = require('path')
const resolve = dir => path.resolve(__dirname, dir)

module.exports = {
  stories: ['./stories/**/*.stories.(js|mdx)'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-viewport',
    '@storybook/addon-docs'
  ],
  webpackFinal: async config => {
    config.resolve = {
      extensions: ['.js', '.vue', '.json', '.jsx'],
      alias: {
        vue$: 'vue/dist/vue.esm.js',
        '@': resolve('../src'),
        lodash: 'lodash-es',
      }
    }
    config.module.rules.push({
      test: /\.less$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'less-loader',
          options: {
            sourceMap: false,
            modifyVars: {},
            javascriptEnabled: true
          }
        }
      ],
      include: path.resolve(__dirname, '../') // 这里很关键
    })
    return config
  }
}

3. 编写 stories
   新建 .mdx 后缀文件，这里我借助 ant 框架写了个小 demo

import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
import { action } from '@storybook/addon-actions'
import moment from 'moment'
import VueDemo from '@dt-components/VueDemo'



# VueDemo

这是 vue 示例组件，接收两个参数：date 日期和 onChange 日期改变回调函数。

{{
  components: { VueDemo },
  template: '',
  props: {
    date: {
      default: () => moment('2020-05-21')
    }
  },
  methods: {
    onChange: action('onChange')
  }
}}

## Props