Vueコンポーネントの強く推奨される名付け方

Vueの公式ドキュメントが強く推奨するVueコンポーネントのファイル名の命名規則。

単一ファイルコンポーネント

ベースコンポーネント

  • 頻繁に使われるベースコンポーネント(ステートを持たないDumpコンポーネントやPureコンポーネントと呼ばれるもの)は、BaseAppまたはVで始めないとならない。
  • :ng: MyComponent.vue VueTable.vue Icon.vue
  • :ok: BaseButton.vue AppTable.vue VIcon.vue

シングルインスタンスコンポーネント

  • シングルインスタンスコンポーネント(1ページにつき1個しか使われないコンポーネント)は、Theを付ける。
  • :ng: Heading.vue SideBar.vue
  • :ok: TheHeading.vue TheSideBar.vue

強い結合関係にあるコンポーネント

  • 親子関係にあるようなコンポーネント群は、親コンポーネントの名前を子コンポーネントの接頭辞にする。
  • エディタでファイル一覧を出した時、関連性のあるコンポーネントがまとまるようにするため。

:ng:

TodoList.vue
TodoItem.vue
TodoButton.vue
SearchSidebar.vue
NavigationForSearchSidebar.vue

:ok:

TodoList.vue
TodoListItem.vue
TodoListItemButton.vue
SearchSidebar.vue
SearchSidebarNavigation.vue

出典

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.