vue でコンポーネントを作るときのファイル構成のモヤモヤを解決したい

事の発端

現在仕事ではangular を使用して悪戦苦闘しながら社内webシステムを作っています。
angularで好きだなーと思う中で、コンポーネントのファイル構成が自分の中でスッキリしています。

何がスッキリしているかというと、コンポーネントを作ると
以下のようにファイルがはっきり分かれるのが好き。

hoge.component.html
hoge.component.css
hoge.component.ts

vue-cliで作るとこの全部がvueファイルの中に全部入りになってしまうのが
自分の中でモヤモヤしてました。
※ 自分が知らないだけ？

そんなときに、別のことをgithubで調べていると
anlularのような構成 で作っている方がいて、おぉぉぉ！コレだ！と思いました。

そんでもって毎回作るのは大変なので、以下のようなボイラープレートを作成して、これから使っていこうと思っています。

仕組み

難しいことはできないので、以下のような構成を事前に準備。

$ tree ./boilerplate/
./boilerplate/
├── Template.component.css
├── Template.component.html
├── Template.component.vue
└── Template.component.vue.ts

css、htmlは空ファイルでおいておくとして、vue、vue.tsファイルは一応
以下のようにしておきます。

Templete.component.vue

<template src="./{{ Template }}.component.html"></template>
<style scoped src="./{{ Template }}.component.css"></style>
<script lant="ts" src="./{{ Template }}.component.vue.ts"></script>

Templete.component.vue.ts

import { Component, Vue, Prop, Emit } from "vue-property-decorator";

@Component
export default class {{ Template }}Component extends Vue {
  constructor() {
    super();
  }
}

ボイラープレートが出来たところで、以下のようなスクリプトを準備します。

make_component.sh

#!/bin/bash
compname=$1

cp -r ./boilerplate ./src/components/${compname}

exts=(css html vue vue.ts)
for ext in ${exts[@]}; do
  mv ./src/components/${compname}/Template.component.${ext} \
     ./src/components/${compname}/${compname}.component.${ext}
done

exts=(vue vue.ts)
for ext in ${exts[@]}; do
  filepath=./src/components/${compname}/${compname}.component.${ext}
  sed -ri "s/[{]{2} ?Template ?[}]{2}/${compname}/g" ${filepath}
done

このスクリプトを以下のように実行してやると

$ ./make_component.sh Hoge
$ tree ./src/components/
./src/components/
├── Hoge
│   ├── Hoge.component.css
│   ├── Hoge.component.html
│   ├── Hoge.component.vue
│   └── Hoge.component.vue.ts

$ cat ./src/components/Hoge/Hoge.component.vue
<template src="./Hoge.component.html"></template>
<style scoped src="./Hoge.component.css"></style>
<script lant="ts" src="./Hoge.component.vue.ts"></script>

$ cat ./src/components/Hoge/Hoge.component.vue.ts
import { Component, Vue, Prop, Emit } from "vue-property-decorator";

@Component
export default class HogeComponent extends Vue {

  constructor() {
    super();
  }

}

自分の中ではかなりスッキリ。超自己満足。

ここまでお付き合いしていただきありがとうございます。