寝て起きて寝て

プログラミングが出来ない情報系のブログ

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

f:id:krs1:20210413184133p:plain

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 guideConfiguration を参考に設定する
中〜大規模な開発になると各プロジェクト毎に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/ へ接続してみると画像のように表示されるはず

f:id:krs1:20210413184156p:plain

参考サイト

Vue Styleguidist
【vue】Vue Styleguidistの使い方を説明① 〜Laravel + vue環境でVue Styleguidistを動かす〜
Atomic Design ベースの Vue コンポーネント設計