[vue.js] storybook 도입 (vue3 + vite)

 

한 서비스를 여러 개발자가 거쳐가다보니 비슷한 성격의 공통컴포넌트가 여러 개 생기고 관리가 안되는  불상사가 생겨버렸다...

(+문서화의 중요성을 깨달았다.)

공통 컴포넌트 관리를 위해 스토리북도 도입해서 ui 컴포넌트, 기능 컴포넌트 분리하여 관리해보고자 한다.

 

이번 개발 Feature 는 대용량 파일 업로드 시 진행 상황 프로그래스바 다이어로그를 띄워주는 작업이다.

해당 개발을 진행하기에 앞써, 스토리북도 같이 진행하려고 한다.

 

 

 

---

 

필요성

---

1. 컴포넌트 관리 효율화: 여러 개발자가 개발한 비슷한 컴포넌트들을 통합하고 관리하기 위해 필요
2. 재사용성 향상: 공통 컴포넌트를 만들어 다른 프로젝트에서도 재사용할 수 있다.
3. 시각적 테스트 용이성: 컴포넌트를 독립적으로 시각적으로 테스트할 수 있어 개발 및 디자인 프로세스를 향상시킨다.
4. 문서화 및 협업 용이성: 컴포넌트에 대한 문서화와 협업이 용이해진다.

 

 

 

설치

node version : v18.19.1

 

 

 

 

https://storybook.js.org/docs/get-started/install 

Install Storybook • Storybook docs

vue.js 를 사용하고 있는 나는 해당 docs 에 보고 설치를 천천히 따라가봤다.

 

 

최신 버전 설치

pnpm dlx storybook@latest init

 

 

 

@storybook/cli v8.0.10 이 설치 되었다.

 

 

 

 

 

 

 

storybook 실행

pnpm run storybook

 

 

 

 

 

 

 

 

 

 

ERROR!!

 

 

pnpm add @vitejs/plugin-vue

 

 

vite 빌더의 구성 사용자 정의를 추가해준다.

 

 

 

.storybook/main.ts

아래 코드 추가! 

//.storybook/main.ts

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'


...
 viteFinal(config) {
    // Modify the Vite config as needed
    return defineConfig({
      ...config,
      plugins: [vue(), ...(config.plugins || [])],
    })
  },

 

 

 

 

전체 코드

//.storybook/main.ts

import type { StorybookConfig } from '@storybook/vue3-vite'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions',
  ],
  viteFinal(config) {
    // Modify the Vite config as needed
    return defineConfig({
      ...config,
      plugins: [vue(), ...(config.plugins || [])],
    })
  },
  framework: {
    name: '@storybook/vue3-vite',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
}
export default config

 

//.storybook/preview.ts


import type { Preview } from '@storybook/vue3'

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
}

export default preview

 

 

 

 

다시 pnpm run storybook 하면 잘 뜬다! 

 

 

 

 

 

현재 Quasar UI 프레임워크를 사용 중이다.

스토리북 초기 세팅시 설치되는 Example 에  퀘이사 버튼으로 수정해봤는데 적용이 안되는 문제가 있었다..