Vueコンポーネント、ディレクトリ名

Question

Vueのコンポーネントのディレクトリ名について

https://jp.vuejs.org/v2/style-guide/index.html#%E5%AF%86%E7%B5%90%E5%90%88%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E5%90%8D%E5%89%8D-%E5%BC%B7%E3%81%8F%E6%8E%A8%E5%A5%A8

こちらの公式の文章を読みました

特定の親コンポーネントのみに使用される子コンポーネントの名前には、その親コンポーネントの名前がプレフィックスとしてつけられますが、その子コンポーネントが、親コンポーネントと同じ名前のディレクトリに属する場合がどうしたら良いでしょうか。

分かりづらくて申し訳ないですが以下2パターンのうちどちらが正しいのでしょうか

"1".

file) Parent.vue
directory) Parent
|_file) ParentChild.vue

"2".

file) Parent.vue
directory) Parent
|_file) Child.vue

electron-vueのテンプレートでは

file) LandingPage.vue
directory) LandingPage
|_file) SystemInformation.vue

という構成になっているのですが、

LandingPageSystemInformation.vue

というファイル名にはなってません。

従って2のパターンが正しいのでしょうか

Answer 1

質問文で参照されているスタイルガイドに

この問題を、子コンポーネントを親コンポーネントの名前を元に命名したディレクトリの中に入れることで解決したいと思うかもしれません。
例えば:

components/
|- TodoList/
|- Item/
|- index.vue
|- Button.vue
|- index.vue
もしくは:

components/
|- TodoList/
|- Item/
|- Button.vue
|- Item.vue
|- TodoList.vue
これは推奨されません。以下のような結果を生むからです:

同じような名前のファイルがたくさんできてしまい、コードエディタ上で素早くファイルを切り替えるのが難しくなります。
ネストしたサブディレクトリがたくさんできてしまい、エディタのサイドバーでコンポーネントを参照するのに時間がかかるようになります。

とあるので1も2も、electron-vueもこのスタイルガイドには従っていないのではないでしょうか。
あくまでスタイルガイドなので、electron-vueがそうしているように、従わないのも選択肢のひとつですね！

Comments

[退会済みユーザー]

完全に見落としてました。
１つのディレクトリでプレフィックス込みの命名をするというのが公式の推奨なんですね...。

Answer 2

自分はelectron-vueに似た構成をよく使います。

file structureに関しては悩みますよね。reactとvueの経験がありますが、あまり公式に従わなくてもいいかと思いますし、どれが答えってのもないと思います。
Nuxt.jsをを使うなどFrameworkを使う場合はそれに準拠する必要がありますが、Vueはあくまでライブラリなので。

最近vueのコンポネントを作るときに以下のような構成で作ることが多いです。

components/
 |- Parent/
     |- index.js
     |- Parent.vue
     |- Child.vue
 |- LandingPage/
     |- index.js
     |- LandingPage.vue
     |- SystemInformation.vue

 ...

 |- shared/ # or commonとか？
     |- index.js
     |- Button/
         |- index.js
         |- Button.vue

コンポネントを使うときは

import Parent from './components/Parent' // .vueなし
import { Button } from './components/shared'

とやっています。

これがおすすめというわけではないですが、個人的に

• .vueを書くのが好きでない
• 関連コンポネントをカプセル化したい
• Prefixをつけていくとファイル名が長くなり冗長になりがちになり、ファイル名のコンポネントを表す名前がわかりにくくなるため

という理由でやっています。

参考になれば幸いです。

Comments

[退会済みユーザー]

回答ありがとうございます
すみません、わたしはまだまだ経験が浅く、.vueとおなじところに格納されてるindex.jsの意味がまだよく分かりません…（；＿；）
これはいったいなんなのでしょうか…

[odyu]

import hoge from './src/hnge'
とやったら

src/hoge/index.js
を探しに行ってくれます。

[退会済みユーザー]

今日ついさっき、社内会議でこの質問を公開し、odyuさんの回答をとても参考にさせていただきました。
公式の推奨より、electron-vueに似た構成の方が分かりやすいという結論に私たちもなりました。
本当にありがとうございました。

[odyu]

こちらこそ、参考になってよかったです。