JavaScript
vue.js
1473683872@wonohe

大規模Vue.jsアプリを開発するときのディレクトリ構成考えた

JavaScriptvue.js

背景

Vue.jsは公式のチュートリアルとかドキュメントは充実してるし、vue-cliもあるし、
初学者が勉強して動作させるのはけっこう簡単にできる。
でも、大規模アプリケーションを開発するとなると単一ファイルコンポーネントに
ひたすら処理を書いてしまいがちなので、大規模アプリケーション開発でも耐えうる（であろう）
ディレクトリ構成を考えました。

想定

50ページ以上のVue.jsアプリケーションを複数名で開発することに耐えられるディレクトリ構成を目指す。
開発者が処理を書くときに、どこに書けばいいか迷わないように。

構成

vue-cliのwebpackテンプレートをベースにしてます。
https://github.com/vuejs-templates/webpack/tree/develop/template
srcディレクトリ以下は構成をいじっていますが、ルートディレクトリは基本的に
webpackテンプレートのままです。

ディレクトリ構成
Root::
├─build
├─config
├─dist
├─static
├─test
├─src
│  ├─assets
│  ├─components
│  │  ├─mixin
│  │  ├─partial
│  │  │  ├─modal
│  │  │  └─plugin
│  │  └─pages
│  │       ├─member
│  │       ├─register
│  │       └─.....(etc)
│  ├─lib
│  │  ├─lang
│  │  │   ├─en
│  │  │   ├─ja
│  │  │   ├─ch
│  │  │   └─.....(etc)
│  │  │─functions
│  │  └─definition
│  ├─router
│  ├─setup
│  └─store

ルートディレクトリ

/build
webpackのconfigファイル格納

/config
webpackで使う定数（？）関係の設定ファイル格納

/dist
buildしたときにファイルが出力されるディレクトリ。
このディレクトリである必要はありませんが、webpackテンプレート標準ではここに設定されています。

/static
Vue.jsで管理されない静的ファイル群。
主にクライアントがファイルを自由に置く領域として用意しています。

/test
ユニットテスト、E2Eテストを格納。

srcディレクトリ以下

/assets
webpackで結合されるファイルを格納。
SASSファイルや、画像、Webフォントなどを入れています。

/components
Vue.jsの単一ファイルコンポーネント群。
単一ファイルコンポーネントは

  • ページそのもの
  • 複数ページで使い回すパーツ
  • mixin

という３つの用途があるので、それぞれフォルダを分けています。
基本的にpagesに入っているファイル数＝ページ数になります。
ヘッダーやフッターなど共通してるものはpartialに。

/lib
サイト全体で使う処理や設定を格納しています。

  • lang
    多言語サイトの場合の言語ファイル

  • functions
    汎用処理関数群。
    Vue.jsではobjectをv-forで表示する場合に取り出し順を担保しないので、
    オブジェクトをソートして配列化する・・・・といったような関数をまとめてあります。

  • definition
    Enum的なものを格納します。
    実際にはES6ではEnumがないので、Typescript化しないと使えませんが、Vue.jsのTypescript化は結構たいへんなので、
    「Enumのようなもの」を作ってここにいれて運用しています。

/router
vue-routerの設定ファイルを格納。

/setup
アプリケーション固有の設定ファイルを格納。

/store
Vuexモジュールを格納。

あとがき

複数名で開発していると、mixinで処理してるページとベタ書きがあったり、mixinがどのページ用の
mixinか分からなかったり、同じような処理があちこちにあったり・・・・カオスな状態になりがちでした。
「どこに何がある」が分かりやすくなればメンテナンス性もあがるかなと思い考えてみました。
ご意見お待ちしております！

Edit request
11