Help us understand the problem. What is going on with this article?

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();
  }

}

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

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

shun_xx
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away