概要

自分自身のナレッジのため、Vue.jsの設計方針をまとめました。

環境

Vue.js 2系
TypeScript
Vuex
Vue Router

ディレクトリ構成

Atomic Designからtemplateを省いて、崩しています。
他ディレクトリもできるだけシンプルな責任分担にしています。

いろいろな用途に汎用性を持たせるのと、
コーディングのルール付けくらいになるレベルまでの定義を意識しました。
（ガチガチに固めるとそれはそれで実装効率を下げると考えました）

src
|--assets
|--components
|  |--atoms
|  |--molecules
|  |--organisms
|  |--pages
|--constants
|--models
|--router
|--service
|--store
|  |--modules
|--utils
|--views

各ディレクトリの役割

ディレクトリごとに責務を分離し、

• 何がどこにあるか
• 改修時どこを編集すればいいのか
• 機能追加時どこに何を追加すればいいのか

が分かりやすいよう定義することを意識しました。

リポジトリ

上記を定義した個人学習用リポジトリです。
改修の余地はissueに纏めています。
https://github.com/RinyuDrvo/language_app