소개

이것은 Nuxt.js + Storybook의 환경을 만들고 싶지만 여러 가지 귀찮은 사람을 위해 만든 히나가타입니다.
우선 샘플용으로 Button 만 작성하고 있습니다.

Let's 3분 요리 ✊😸

GitHub

절차

Git for Windows 또는 Terminal을 시작하고 작업 디렉토리에서 다음 명령을 순서대로 입력합니다.

git clone https://github.com/tsuengineer/nuxt-storybook.git

cd nuxt-storybook

npm i

npx nuxt storybook

마지막 명령의 실행이 끝나면 마음대로 브라우저가 기동할 것입니다만, localhost:3003 하지만 열 수 있습니다

스토리북 화면

잘하면 이런 느낌의 화면이 표시됩니다.

버튼에 대한 소스 코드는 /components/atoms/Button 디렉토리에 있습니다.

이 버튼을 실제로 사용한 곳

아래 명령을 실행 한 후 localhost:3000에 액세스하면 오른쪽 하단에 (파란색) 버튼이 표시됩니다.

어떻게 Button 컴포넌트를 import하고 있는지는 /pages/index.vue 의 안에서 보면 알 수 있다고 생각합니다.

npm run dev

이상입니다 😽