Vuejos에서 Storybook 사용

1861 단어 Vue.jsstorybook

Storybook 3.2에서 Vuejs 지원이 추가되었기 때문에 바로 사용해 보겠습니다.
Storybook은 구성 요소 디렉터리를 간단하게 만들 수 있는 도구로 프로젝트 내의 자체 제작 구성 요소를 일람하고 사용하는 방법을 디렉터리로 만들 수 있습니다.

storybook/cli 설치

npm i -g @storybook/cli

기존 Vuejs 프로젝트에서 준비

cd vuejsのプロジェクトがあるディレクトリ

스토리 북 설치

getstorybook

storybook 서버 시작

yarn run storybook
이 상태에서 http://localhost:6006/가 열리면 초기 설정 화면이 열립니다.

구성 요소 추가


스토리북에 구성 요소를 추가하려면 getstorybook 에서 만든 stories 디렉터리의 index.js 에 정의를 추가하십시오.
stories 디렉토리는 편집.storybook/config.js을 통해 수정할 수 있습니다.

참고 자료

  • Introducing: Storybook for Vue 🎉 – Storybook – Medium
  • Announcing Storybook 3.2 – Storybook – Medium
  • storybook/MIGRATION.md at master · storybooks/storybook · GitHub
  • 좋은 웹페이지 즐겨찾기