===
Nodeバージョンを最新にしてください。
例)Nodebrewでnpm管理
/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/
# 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
https://eslint.org/docs/rules/
package.jsonに下記を追加。
"storybook": "start-storybook"
コマンド一覧
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
npm run storybook
コンソールにリンクが表示されるので、クリックして確認してください。
build-storybook
このプロジェクトにはdocker-compose.yml
が配置しています。
最新のnodeイメージを取得してくるので、こちらを使用してnpm
コマンドを実行できます。
docker-compose run --rm node npm コマンド
ただし、
docker-compose run --rm node npm storybook
で起動したサーバーはdocker内に存在するのでアクセスできません。
dockerコンテナのみで完結したい場合は別途ポート設定をして下さい。
# 構文チェック
npm run eslint
# 自動修正
npm run eslint-fix