vueを使っている時のディレクトリ構成
みなさん、ディレクトリ構成は気になったりしませんか？
自分は割とディレクトリ構成を気にします。
どこにどういうコードが書いてあるのかすぐに探すことができるからです。
自分は普段railsでコードを書いているので、railsのレールに則って書くとディレクトリ構成で悩むことは少ないです。
そして、vueを使っている場合は、レールがないので、自分で考えなければいけません。
今回は初期構成から現在に至る構成を伝えます。
これがベストプラクティスかどうかは自分もわかりません。
現在の構成はgitlabhqを見ていて、納得することが多かったので、それに従っています。
余談ですが、大規模なプロダクションレベルのコードを見るのはオススメです！
初期構成
javascripts ├── application.js ├── components │ ├── comment │ │ │── form.vue │ │ └── icon.vue │ └── common │ └── form │ └── modal.vue ├── comment.js ├── mixins │ └── icon.js └── store └── index.js
こんな感じです。
内容
- 起点となるディレクトリ(javascripts)にファイルを置いていく
- compoments単位・store単位に区切る
- 共通のcomponentsはcommonを利用する
vuexなどのサンプルにあるやり方です。
一番最後だけは付け足しました。
小規模のサイトならいいのでしょうが、大規模のサイトになってくるとちょっとcomponents内が膨らんでいきます。
また、起点となるファイルもディレクトリを作成することになるでしょう。
現在の構成
javascripts
├── application.js
├── icon
│ ├── components
│ │ ├── form.vue
│ │ └── icon.vue
│ ├── icon_bundle.js
│ └── store
│ └── index.js
├── initializers
│ └── axios.js
└── vue_shared
└── components
└── form
└── modal.vue
内容
- 起点となるのはディレクトリ内の
**_bundle.jsで管理します。 - 起点となるディクレトリ単位で
components・storeを作成 - 共通処理は
vue_sharedに移す - 初期設定は
initializersで設定する
一番最後のはWeb アプリの JavaScript の初期化処理をどうまとめるかを見て取り入れました。
普段railsと一緒に使用しているので、ディレクトリ単位の管理だと、位置を合わせることができるので、便利です。
components・storeもどこで一緒に利用されているのかがわかります。
このディレクトリ構成が何かしっくりきました。
もっとこうしたほうがいい！などの意見があれば教えてください。
以上です。
