지금 입니다만, Storybook에 손을 내놓으려고 생각해, 환경 구축으로부터 순서대로 메모로서 남겨 갑니다.

처음에

Storybook이란?

공식 사이트 : htps : //s와 ry 보오 k. js. rg/

UI 구성 요소 카탈로그를 만들 수있는 도구

디자이너와 프로그래머의 인식에 사용할 수 있습니다

Doc 등도 기재 할 수 있기 때문에, 팀 개발에서의 의사 소통에도 사용할 수있다

Storybook 환경 구축

환경

콘솔

% node -v
v12.13.0
% npm -v
6.13.6

프로젝트 만들기

Vue CLI를 사용하여 원하는 설정으로 프로젝트를 만듭니다.

콘솔

% npx @vue/cli create vue-storybook-demo 

Vue CLI v4.2.2
? Please pick a preset: Manually select features
? Check the features needed for your project: TS, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint o
n save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

개발 서버 시작

콘솔

% cd vue-storybook-demo 
% npm run serve

브라우저에서 http://localhost:8080/에 액세스하여 표시 확인을 수행합니다.

Storybook 플러그인 추가

콘솔

% npx @vue/cli add storybook

? What do you want to generate? Initial framework
? What storybook version do you want? (Please specify semver range) >=5.3.0
? Use Storybook CSF (component story format)? Yes
? Use Storybook Docs? Yes

자동 생성된 샘플 수정

이번 VueCLI 설정은 자동 생성되는 샘플에서 오류가 발생했기 때문에 수정합니다.

src/components/MyButton.vue

 <script lang="ts">
- export default {
-   name: "my-button",
- 
-   methods: {
-     onClick() {
-       this.$emit("click");
-     }
-   }
- };
+ import { Component, Vue } from "vue-property-decorator";
+ 
+ @Component
+ export default class MyButton extends Vue {
+   public onClick(){
+     this.$emit("click");
+   }
+ }
 </script>

Storybook 서버 시작

콘솔

% npm run storybook:serve

브라우저에서 http://localhost:6006/?path=/story/button--with-text 로 이동하여 보기를 확인합니다.
(또는 마음대로 브라우저가 열립니다.)

Story 추가

원래 구성 요소 만들기

다음 파일을 새로 작성합니다.

src/components/MyHeading.vue

<template>
  <h1>
    <slot></slot>
  </h1>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class MyHeading extends Vue {}
</script>

Story 추가

다음 파일을 새로 작성합니다.

src/stories/MyHeading.stories.js

import MyHeading from "../components/MyHeading.vue";

export default {
  component: MyHeading,
  title: "Heading"
};

export const withText = () => ({
  components: { MyHeading },
  template: '<my-heading>Hello Title</my-heading>'
});

src/stories/MyHeadding.stories.mdx

import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import MyHeading from '../components/MyHeading.vue';

<Meta title="MDX|Heading" component={MyHeading} />

# MyHeading

<Props of={MyHeading} />

This is a simple button with some text in it.

<Preview>
  <Story name="With Text">
    {{
        components: { MyHeading },
        template: '<my-heading>Hello Title</my-heading>'
    }}
  </Story>
</Preview>

브라우저에서 표시 확인

이것으로 환경 구축이 완료되었습니다.
여기에서 자작의 컴퍼넌트를 추가하거나, 좋아하는 Storybook 플러그인을 추가해 프로젝트 마다의 컴퍼넌트 카탈로그를 작성해 갑니다.