Vue Styleguidist の導入
Vue Styleguidist
コンポーネントのプレビューができるようになるツール
ローカルホストで立ち上げられるので、ブラウザ毎でコンポーネントの検証ができる
Atomic Designで開発しているならコンポーネントが多くなり管理が大変になるので使おう
propsの説明などが表示されるためどんなコンポーネントなのか一眼でわかるのが利点
(似たようなものにStorybookがあるらしい)
目標
atoms
, molecules
, organisms
で表示させるコンポーネントを切り分けて
atoms
で追加するButtonコンポーネントが、Vue Styleguidistで表示されるようになる事
templatesとpagesはめんどいので省略(どうせこの三つができれば同じように設定するだけなのでね((((
動作環境
Mac
@vue/cli 4.5.12
(前回のDockerテストで構築したアプリケーション
Vue Styleguidistインストール
Vue CLI 3以上の場合は
vue add styleguidist
でインストールできるので今回はこちらでインストールする
インストール完了後 yarn styleguide
で起動し、 http://localhost:6060/
へアクセスしてみる
この画像のように表示されたらOK
Atomic Designへむけてディレクトリ追加
今回は Atomic Design に向けて環境を整理するため
./src/components/
配下に atoms
, molecules
, organisms
のディレクトリを掘る
src/components/ ├── AppButton.vue ├── HelloWorld.vue ├── atoms ├── molecules ├── organisms └── sizeMixin.js
今回追加された vue ファイルや createしたときのファイルなどあるが、一旦放置
styleguide.config.js の設定
Locating your components and organizing your style guideやConfiguration を参考に設定する
中〜大規模な開発になると各プロジェクト毎にstyleguideが生成されそうなのでserverPortを個別に指定している
なお Cookbookにもあるが、サードパーティーのプラグインや、vuexをスタイルガイドで使いたい場合は、別途設定が必要になるので注意
styleguide.config.js
module.exports = { title: 'styleguide-test', sections: [ { name: 'Atoms', components: 'src/components/atoms/**/index.vue' }, { name: 'Molecules', components: 'src/components/molecules/**/index.vue' }, { name: 'Organisms', components: 'src/components/organisms/**/index.vue' } ], serverPort:6060 }
表示するコンポーネント作成
atoms
とりあえず簡単なものでボタンコンポーネントを作成
index.vueにしているのは別でimportするとき記載しなくて良くなるから
Readme.mdはこれを見ると
ComponentName.md
形式でも良さそうだったけど、index.vueにしているとできないっぽい?ので Readme.md
で
src/components/atoms/ └── Button ├── Readme.md └── index.vue
index.vue の中身
<template> <button class="button" :class="{small,large}"><slot /></button> </template> <script> export default { name:'Button', props:{ large:{type:Boolean,default:false}, small:{type:Boolean,default:false} } } </script> <style lang="postcss" scoped> .large{ width:100%; height:100%; } .small{ width:10%; height:10%; } </style>
Readme.md の中身
<Button>アイウエオ</Button> <Button large>アイウエオ</Button> <Button small>アイウエオ</Button>
再度 http://localhost:6060/ へ接続してみると画像のように表示されるはず
参考サイト
Vue Styleguidist
【vue】Vue Styleguidistの使い方を説明① 〜Laravel + vue環境でVue Styleguidistを動かす〜
Atomic Design ベースの Vue コンポーネント設計