Project setup

pnpm install

Run your storybook

pnpm run storybook

Run your unit tests

pnpm run test:unit

Run your end-to-end tests

pnpm run test:e2e

Lints and fixes files

pnpm run lint

File directory structure

|──.storybook              // 文档目录
    |──stories             // 文档视图组件文件目录
        |──Button          // 文档视图组件
    |──main.js             // 配置storybook解析文件
    |──preview.js          // 配置storybook全局样式
|──packages                // 组件目录
    |──Button              // 需封装的组件文件目录
    |──index.ts            // 导出所有packages组件
|──tests                   // 测试目录
├──babel.config.js         // babel配置文件
├──.eslintrc.js            // eslint配置
├──.gitignore              // git忽略文件
├──package.json            // npm包核心文件
├──pnpm-lock.yaml          // pnpm包版本控制文件
├──tsconfig.js             // ts配置文件
├──vue.config.js           // vue配置文件

.storybook/stories文件夹下面的文件以下简称文档 ，packages文件夹下面的文件简称组件

以Button组件为例：

stories/Button文档对应packages/Button组件

所有组件统一在packages/index.ts中导出
import Button from "./Button/Index.vue";
export { Button };

文档中引入
import { Button } from '../../../packages/index.ts';

Quick Start

.storybook/stories/Button

import { Button } from '../../../packages/index.ts';
export default {
  title: 'Example/Button',
  component: Button,
};
const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Button },
  template: '<my-button @onClick="onClick" v-bind="$props" />',
});

export const Primary = Template.bind({}); // 可导出多个
Primary.args = {
  primary: true,
  label: 'Button',
};

packages/Button

<template>
  <button type="button" @click="onClick">
    {{ label }}
  </button>
</template>

<script>
  props: {
    label: {
      type: String,
      required: true,
    },
  },
  methods: {
    onClick() {
      this.$emit("onClick");
    },
  }
</script>