Storybookのデモ

===

事前準備

Nodeバージョンを最新にしてください。

例）Nodebrewでnpm管理

Homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

brew update
brew install nodebrew
nodebrew install latest
# インストールされているのnodeのバージョンを確認
nodebrew list 
nodebrew use latest

構築手順メモ

これはこのリポジトリを作成したときの手順です。

このソースを起動したいだけの場合は、下の初期セットアップ方法を見て下さい。

参考

https://storybook.js.org/docs/guides/guide-vue/

Node

# npm init
npm init

# install Storybook
npm install @storybook/vue --save-dev

# install vue
npm install vue --save

# install js loader
npm install vue-loader vue-template-compiler @babel/core babel-loader babel-preset-vue --save-dev

# install css loader
npm install style-loader css-loader sass-loader node-sass --save-dev
npm rebuild node-sass

# install eslint
npm install eslint eslint-config-vue eslint-plugin-vue --save-dev

# eslint setting
 ./node_modules/.bin/eslint --init

# install bootstrap
npm install bootstrap jquery popper.js --save-dev

# install fontawesome
npm install --save-dev @fortawesome/fontawesome-free

Eslint

https://eslint.org/docs/rules/

Script

package.jsonに下記を追加。

"storybook": "start-storybook"

Storybook Init

コマンド一覧

cd プロジェクトルート
mkdir .storybook
mkdir src/stories
touch .storybook/main.js
touch .storybook/config.js
touch src/stories/index.js

.storybook/main.jsを作成し、下記のコードを追加。

module.exports = {
    webpackFinal: (config) => {
        config.module.rules.push({
            test: /\.scss$/,
            loaders: ['style-loader', 'css-loader', 'sass-loader']
        });
        return config;
    }
};

.storybook/config.jsを作成し、下記のコードを追加。

import {configure} from "@storybook/vue";

import Vue from "vue";

configure(() => {
    require('../src/stories');
}, module);

srcディレクトリを作成。
src/storiesディレクトリを作成。
src/stories/index.jsを作成

index.jsの書き方は公式HPを参照して下さい。

初期セットアップ

# install node package
npm install

Storybook 起動

動的起動

npm run storybook

コンソールにリンクが表示されるので、クリックして確認してください。

静的起動

build-storybook

docker

このプロジェクトにはdocker-compose.ymlが配置しています。

最新のnodeイメージを取得してくるので、こちらを使用してnpmコマンドを実行できます。

docker-compose run --rm node npm コマンド

ただし、

docker-compose run --rm node npm storybook

で起動したサーバーはdocker内に存在するのでアクセスできません。

dockerコンテナのみで完結したい場合は別途ポート設定をして下さい。

eslint

# 構文チェック
npm run eslint
# 自動修正
npm run eslint-fix

nonz250/storybook