03. Vue 2 - 스토리 북 (Storybook)

 

컴포넌트를 관리하는 데 도움을 준다

 

# 공식 홈페이지

Storybook: UI component explorer for frontend developers

 

# Vue Storybook 깃 허브

github.com/storybookjs/vue-cli-plugin-storybook

storybookjs/vue-cli-plugin-storybook

 

# 설치

vue add storybook

 

 

 

package.json.scripts

 

package.json.devDependencies

 

 

 

storybook:serve 실행

 

[ JS 방식 ]

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

import MyButton from '../components/MyButton.vue'

export default {
  component: MyButton,
  title: 'Button'
}

export const withText = () => ({
  components: { MyButton },
  template: '<my-button @click="action">Hello Button</my-button>',
  methods: { action: action('clicked') }
})

export const withJSX = () => ({
  render() {
    return <MyButton onClick={linkTo('Button', 'With Some Emoji')}>With JSX</MyButton>;
  }
})

export const withSomeEmoji = () => ({
  components: { MyButton },
  template: '<my-button>😀 😎 👍 💯</my-button>'
})

 

[ MDX 방식 ]

import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import { action } from "@storybook/addon-actions";
import { linkTo } from '@storybook/addon-links'
import MyButton from '../components/MyButton.vue';

<Meta title="MDX|Button" component={MyButton} />

# Button

<Props of={MyButton} />

This is a simple button with some text in it.

<Preview>
  <Story name="With Text">
    {{
        components: { MyButton },
        template: '<my-button @click="action">Hello Button</my-button>',
        methods: { action: action("clicked") }
    }}
  </Story>
</Preview>

You can perform some action when the button is clicked.

<Preview>
  <RMyButton onClick={linkTo('Button', 'With Some Emoji')}>With JSX</RMyButton>
</Preview>

You can even have Emoji in the button.

<Preview>
  <Story name="With Some Emoji">
    {{
        components: { MyButton },
        template: '<my-button>😀 😎 👍 💯</my-button>'
    }}
  </Story>
</Preview>

 

# 스토리북 애드온

Addons | Storybook

 

# 스토리 북 튜토리얼 (공식홈)

Storybook for Vue tutorial

 

# 스토리 북 예제 (공식홈)

Example Storybooks

 

# 참고 사이트

[Vue.js] 내가 스토리북 을 활용하는 방법

 

# 인텔리제이 플러그인

vue, vuex, stroy.js 를 빠르게 생성할 수 있다

vue 를 사용안할 때는 플러그인을 꺼두시면 됩니다