Vue フォルダ構成編 -AtomicDesign- ~後々楽になる~

Vue

AtomicDesign

今回はAtomicDesignの考えのもと、フォルダ構成していきたいと思います。

AtomicDesignとは
一言で言うと5段階に区切って定義するUIデザイン手法。
5段階とは、Atoms(原子),Molecules(分子),Organisms(有機体),Templates(テンプレート),Pages(ページ)です。
化学用語が分からなくても実は簡単。

5段階詳しく
Atoms(原子)
ボタンやテキスト入力などの分けられない単位。

Molecules(分子)
ボタンやテキスト入力を組み合わせたフォーム(検索フォーム)。

Organisms(有機体)
フォームだったりボタンなど組み合わせたヘッダー。

Templates(テンプレート)
ヘッダーとかフッターを組み合わせたページの枠組みです。

Pages(ページ)
テンプレートの枠組みに内容を入れた状態がページ。


VueでAtomicDesign

AtomicDesignの考えをもとにVueでフォルダ構成しました。
それがこちら

.
├── node_modeuls/
├── src/
│     ├── assets/
│     ├── components/
│         ├── atoms/
│         │    └──buttons/
│         ├── molecules/
│         └── organisms/
│              └── footer.vue
│ 
├── pages/
├── main.js
├── router/
│   └── index.js
├── store/
└── App.vue

AtomicDesignをカスタマイズして構成しました。
カスタマイズ点
1.Templateは必要がないので削除
2.organismsとpagesのみstoreとやりとりするのはOK。
3.pagesはrouterとやりとりするのでcomponents外
4.atomsの中にもボタンや入力欄を分けるためにフォルダを作成

人それぞれの好みとプロジェクト規模により異なる点もあるかと思うので参考にしてもらえればと思います。

以上！