Vue.jsでvue-template-loaderを使用してHTMLテンプレートをコンパイルする

Angular 2+に精通しているほとんどの人は、HTMLテンプレートをコンパイルするには、コンポーネントのTypeScriptファイルにテンプレートのURLを追加して、それを実行するだけでよいことを知っています。 Vueでは、ほとんどの場合、代わりにテンプレートタグを使用してテンプレートのマークアップを作成することをお勧めします。

テンプレートを構築するAngular-wayでVueを使用する場合は、vue-template-loaderを使用できます。 vue-template-loaderはvue-class-componentをサポートしているため、クラススタイルのコンポーネントのクラスでデコレータを使用できます。

vue-template-loaderは、HTMLをそれぞれのTypeScriptまたはJavaScriptファイルの個々のレンダリング関数にコンパイルします。

インストール

典型的なシードVue.jsプロジェクトと、webpackの依存関係が必要になります。

次のようにyarnまたはnpmを使用してvue-template-loaderをインストールします。

# yarn
$ yarn add vue-template-loader

# npm
$ npm install vue-template-loader

JavaScriptのwebpack構成

これで、webpackを使用してvue-template-loaderを統合できます。

原則として、webpack構成ファイルにvue-template-loaderを追加します。

webpack.config.js

module.exports = {
  module: {
    rules: [
        {
          test: /\.html$/,
          loader: 'vue-template-loader',
          // We don't want to pass `src/index.html` file to this loader.
          exclude: /index.html/,
        }
    ]
  }
}

- タグのsrc属性を処理する場合と同様に、HTMLファイルで使用されるアセットをレンダリングするには、次のオプションを指定できます。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/,
        loader: 'vue-template-loader',

        // We don't want to pass `src/index.html` file to this loader.
        exclude: /index.html/,
        options: {
          transformToRequire: {
            img: 'src'
          }
        }
      }
    ]
  }
}

上記のオプションを機能させるには、画像ファイルを処理するローダーも追加する必要があることに注意してください（ file-loader を参照）。

TypeScript構成

TypeScriptでvue-template-loaderを使用する場合は、webpackとともにtsloaderおよびtypescriptの依存関係をプロジェクトにインストールする必要があります。

vue-template-loader は、JavaScriptとTypeScriptの両方のwebpackの構成で同じように使用されます。

唯一の追加は、プロジェクトのtypesフォルダーにあります。 TypeScriptが.vueファイルを認識できるようにするには、typesフォルダーに次のシムを追加する必要があります。

// To make TypeScript understand/import *.vue files, this shim is required
declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

// TypeScript type module definition required for vue-template-loader
declare module '*.html' {
  import Vue, { ComponentOptions } from 'vue';

  interface WithRender {
    <V extends Vue>(options: ComponentOptions<V>): ComponentOptions<V>
    <V extends typeof Vue>(component: V): V
  }

  const withRender: WithRender
  export = withRender
}

Javascript/Typescriptファイルでの使用法

次に、nest.htmlというテンプレートファイルを使用して例を作成しましょう。

nest.html

<div class="nest">
  <p>{{ text }}</p>
  <button type="button" @click="baz()">Click Me!</button>
</div>

nest.htmlに対応するnest.jsファイルを追加してみましょう。 Vueでes6を使用する場合、クラスデコレータの有無にかかわらずvue-template-loaderを使用できます。

nest.js

// Without class decorators in javascript
import withRender from './nest.html';

export default withRender({
  data () {
    return {
      text: 'I\'m an alligator'
    };
  },
  methods: {
    baz () {
      console.log('Clicked!');
    };
  };
});

nest.js

// With decorators
import Vue from 'vue';
import Component from 'vue-class-component';
import WithRender from './nest.html';

@WithRender
@Component
export default class Nest extends Vue {
  text = 'I\'m an alligator!';

  baz() {
    console.log('Clicked!');
  }
}

次のようにTypeScriptで使用することもできます。

nest.ts

import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import WithRender from './nest.html';

@WithRender
@Component({})
export default class NestComponent extends Vue {
  data(){
    return {
      text: 'I\'m an alligator!'
    }
  };

  baz(){
    console.log('clicked!');
  }
};

結論

vue-template-loader を使用すると、TypeScriptが強力にサポートされ、 .vue ファイルがなくなるため、コンパイルするファイルの数を減らすこともできます。最後に、Angularのバックグラウンドを持っている人にとっては非常に理解しやすいでしょう。