用途
新着
履歴
分類

Storybookの実行メモ(Vue.js版)

Storybookの実行メモ(Vue.js版)
Vueを利用した環境で、Storybookを使うときの作業メモです。

Storybookは、最小単位でのデザインされたパーツを組み立ててサイトを構成する際に便利な内部向けツールです。

細分化されたパーツをサイトとは別に作品集ようなプロダクトをコンパイルすることで生成することができます。

ただ、若干サーバ側で準備が必要なので、そのメモを記述しておきます。

npmが使えるかどうかの確認

npm -v

できない場合はnpmのインストールが必要。

以下npmでうまく行かなかったらyarnでも可能。

npm --global install yarn

Storybookのvue版をインストール

npm i -D @storybook/vue

storybookでvueファイルの情報を表示するaddonをインストール

npm install --save-dev storybook-addon-vue-info

Storybookのパッケージのバージョンを確認する

npm list --depth=0
@storybook/vue@5.0.11

↑こんな感じで本体

storybook-addon-vue-info@1.1.1

↑こんな感じでaddonが確認ができる。

Storybookの実行

npm run storybook

そうすると

http://localhost:9001/

または

http://192.168.1.11:9001/

のURLでstorybookの画面を確認することができる。「:9001」のポート部分は設定ファイルから変更が可能です。

http://localhost:9001/?path=/story/***

こんなURLでプロジェクトで作ったvueが作品集を見ることができます。

こんな感じ。

補足情報

設定ファイルを編集する

vi .storybook/config.js
import { configure } from '@storybook/vue'

import Vue from 'vue'

function loadStories () {
  require('./../src/stories')
}

configure(loadStories, module)
パッケージファイルの編集
vi package.json
"storybook": "start-storybook -p 9001 -c .storybook",

この部分を編集するとポート番号が変わります。

公開 2019-07-02 00:00:00
このページの二次元コード
Storybookの実行メモ(Vue.js版)

人気のサンプル

search -  category -  about
© 2024 kipure
Top