vue-loaderでVueファイルが肥大化する前に分割する方法

vue-loaderを使っていると「App.vue」というファイルに、template（HTML）、style（CSS）、script（JavaScript）を書くことになり、ファイルが肥大化しやすい。また、ファイルタイプを認識してくれないエディタの場合、自動補完機能がうまく動作してくれない。

ということで、Vueファイルを分割する方法はないかと調べていたら、公式ドキュメントの1ページ目にあった。

Vueファイルを分割する

まず、以下のようにVueファイルを*.vue、*.html、*.css、*.jsに分割する

.
├── App.vue
└── components
         └── MyComponent
              ├── MyComponent.vue
              ├── template.html
              ├── style.css
              └── script.js

次に「MyComponent.vue」で以下のように読み込む

<!-- MyComponent.vue -->
<template src="./template.html"></template>
<style scoped src="./style.css"></style>
<script src="./script.js"></script>

これでVueファイルを分割できた。

ディレクトリ構成とファイル名について

前述のとおりに実装すると、App.vueでMyComponent.vueを読み込むときに、「import MyComponent from './MyComponent/MyComponent'」と冗長になってしまう。
また同名ファイルが複数生成されてしまうので、ファイル検索などが面倒になってしまう。

同名ファイルを回避するために、以下のようなディレクトリ階層にすると、ファイルが分散してしまう。
※同じディレクトリで同じ名前のVueファイルとjsファイルがある場合、vue-loaderがvueを読み込むのかjsを読み込むのかわからずエラーになるので注意

components
├── MyComponent.vue
├── template
│    └── myComponent.html
├── style
│    └── myComponent.css
└── script
      └── myComponent.js

なんだかんだで、今回はじめに紹介したディレクトリ構成・ファイル名が良い気がする。（GitHubで検索したときに一番多くヒットした構成だし）

参考サイト

• Vue Component Spec | Introduction

以上

written by @bc_rikko