2016/10/17

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」で以下のように読み込む
<template src="./template.html"></template>
<style scoped src="./style.css"></style>
<script src="./script.js"></script>

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



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


前述のとおりに実装すると、App.vueMyComponent.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で検索したときに一番多くヒットした構成だし)



参考サイト





以上

written by @bc_rikko

0 件のコメント :

コメントを投稿