Skip to content

Instantly share code, notes, and snippets.

@reoring

reoring/playbook_vuejs.md

Created August 22, 2017 00:42
Show Gist options
  • Save reoring/e816a53ede29de1713fbbd892ce08281 to your computer and use it in GitHub Desktop.
Save reoring/e816a53ede29de1713fbbd892ce08281 to your computer and use it in GitHub Desktop.
Download ZIP
StorybookをVuejsで使う
Raw
playbook_vuejs.md

StorybookをVuejsで使う Screen Shot 2017-08-21 at 17.08.26.png

Storybook3.2からVuejsのサポートが追加されたので、さっそく使ってみます。

Storybookはコンポーネントのカタログを簡単に作成できるツールで、プロジェクト内の自作コンポーネント一覧や使いかたをカタログにできます。

Screen Shot 2017-08-21 at 16.54.49.png

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 を編集することで変更することができます。

参考資料

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment