Stroybook-vue 기본 생성법

[방법1]

컴포넌트 개발 -> stories폴더에 컴포이름.stories.js 생성

export default { title: 'Button' };  //스토리북 LeftMenu 제목
export const normalButton = () => ({ // 스토리북 LeftMenu 상세제목
   components: { 컴포넌트 },
   template: '<컴포넌트> 컴포넌트입니다. </컴포넌트>'
});

[방법2]

s컴포넌트 개발 -> stories폴더에 컴포이름디자인1.story.vue 생성

<template>
    <컴포넌트 color="primary">Primary color 컴포넌트</컴포넌트>
</template>

<script>
import 컴포넌트 from '../src/components/shared/컴포넌트.vue';

export default {
  name: '컴포넌트프라이머리',
  components: { 컴포넌트 },
};
</script>

stories폴더에 컴포넌트.stories.js 생성

import ButtonNormal from './컴포넌트프라이머리.story.vue';
import ButtonNormal from './컴포넌트블랙.story.vue';
export default {
  title: '컴포넌트'   //스토리북메뉴이름
};
export const primary컴포넌트 = () => 컴포넌트프라이머리;
export const black컴포넌트 = () => 컴포넌트블랙;

 

StoryBook 은 build해서 정적웹으로 내보낼수 있다. 이를 배포하면 다같이 사용하는 웹문서가 된다.

 

 

storybook-addon-designs : 디자이너 도구인 피그마와연동이 가능하다

애드온 docs을 이용해서 Netflify에 정적으로 배포해서 문서용으로 사용 가능

---

Knobs  : 모든것을 별개의 스토리로 만드는것은 힘들다. 변경가능한 데이터 영역을 UI 를 통해 손쉽게 변경가능하게 만들어 준다.

import { withKnobs, text, boolean, number, select } from '@storybook/addon-knobs/vue';

export function count(count = 0) {
  return number('Insert number plz', count);
}

const story = storiesOf('Common/CountComponent', module);
story
  .addDecorator(withKnobs);

story
  .add('Empty cart', () => ({
      components: { CountComponent },
      template: '<count-component :countProps="${count(0)}"/>',
    });
  })

---

vue-router를 사용하는 컴포넌트에 대한 스토리를 작성하려면 storybook-vue-router 를 사용해야 한다.

addDecorator로 추가해주기만 하면 왼다.

import StoryRouter from 'storybook-vue-router';

const story = storiesOf('.../컴포넌트', module);
story
  .addDecorator(withKnobs)
  .addDecorator(StoryRouter());

---