storybook 7.6

https://storybook.js.org/tutorials/intro-to-storybook/vue/zh-CN/get-started/

开始吧

• 注释：degit 从 github 拉去代码的工具，在国内范文 github 有问题，需要手动下载这个模板npx degit chromaui/intro-storybook-vue-template taskbox
• 注释：启动组件开发环境yarn storybook

简单组件

• 按照组件驱动开发 (CDD)来构建我们的 UI
  • 注释：CDD 组件驱动开发，把一个页面分成边界清晰的小组件独立开发，这样更有利于提高可维护性和进行ui测试
• 我们根据上述的草图编写测试所需的状态(state)。然后我们使用 Storybook 模拟数据并独立的构建组件。我们可以“视觉测试”组件在每个状态下的外观。
  • 创建 task 组件以及它相关的 story 文件：src/components/Task.vue 和 src/components/Task.stories.js
    • 注释：7.6提供的模板，组件放在src/stories文件中
    • 注释：其中Task.stories.js用来创建不同测试状态

import Task from './Task.vue';

import { action } from '@storybook/addon-actions';

export default {
  component: Task,
  //👇 Our exports that end in "Data" are not stories.
  excludeStories: /.*Data$/,
  title: 'Task',
  //👇 Our events will be mapped in Storybook UI
  argTypes: {
    onPinTask: {},
    onArchiveTask: {},
  },
};

export const actionsData = {
  onPinTask: action('pin-task'),
  onArchiveTask: action('archive-task'),
};

const Template = args => ({
  components: { Task },
  setup() {
    return { args, ...actionsData };
  },
  template: '<Task v-bind="args" />',
});
export const Default = Template.bind({});
Default.args = {
  task: {
    id: '1',
    title: 'Test Task',
    state: 'TASK_INBOX',
  },
};

export const Pinned = Template.bind({});
Pinned.args = {
  task: {
    ...Default.args.task,
    state: 'TASK_PINNED',
  },
};

export const Archived = Template.bind({});
Archived.args = {
  task: {
    ...Default.args.task,
    state: 'TASK_ARCHIVED',
  },
};