storybook使用初探

官网文档： storybook
当前使用版本 5.3.19
示例项目

storybook起步（vue组件）：

storybook安装有2种方式，一种是自动安装，但是比较容易出问题，这里介绍手动安装的方式；
如果在一个空文件夹安装storybook，是无法运行的，会报错缺少vue相关依赖，所以首先创建一个vue项目

vue-cli 创建一个 Vue 项目

vue create demo-storybook
npm i

增加与 @storybook 相关的依赖

npm install @storybook/vue -S
npm install vue-loader vue-template-compiler @babel/core babel-loader babel-preset-vue -S

在 package.json 增加一个 script

{
  "scripts": {
    "storybook": "start-storybook"
  }
}

工作区创建文件 .storybook/main.js

module.exports = {
  stories: ['../src/**/*.stories.[tj]s'],
};

撰写，创建文件src/stories/0-App.stories.js，内容如下
ps: 老版本的写法是使用StoriesOf ,add 语法，如：

storiesOf('Button', module)
.add('default',()=>111)
.add('story2',()=>2222)

import App from '../App.vue'
export default {
title: 'App',
};
export const toStorybook = () => ({
components: { App },
template: '<App />',

});

toStorybook.story = {
name: 'app',
};

启动项目 npm run storybook
提示报错:

image.png

因为前面安装项目使用了sass,组件style使用了lang='sass',这里需要给storybook自定义webpack配置，以支持sass：
.storybook/main.js

const path = require('path');

module.exports = {
    stories: ['../src/**/*.stories.[tj]s'],
    webpackFinal: async (config, { configType }) => {
      // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
      // You can change the configuration based on that.
      // 'PRODUCTION' is used when building the static version of storybook.
  
      // Make whatever fine-grained changes you need
      config.module.rules.push({
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../'),
      });
  
      // Return the altered config
      return config;
    },
  };

查看效果：

image.png

问题：

1.docs插件：6.x版本才能支持vue使用mdx，但是使用会报错h不存在，貌似babel插件冲突，比较麻烦。因此暂时不用mdx；降级使用5.x版本docs,自动生成doc,可惜暂不支持mdx,截止目前6.x还是beta版；

为公共组件做一个文档，进行预览和使用说明,同时不影响现有使用

TODOs：

能在线预览UI组件
编译输出公共组件，这个用vue项目自带的功能（storybook相当于一个附加的能力）
能自由写MD ,对于vue 5.x只能自动生成DOC文档

最后编辑于：2020.05.28 10:44:03