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

投稿日: 2022-04-20 2022-10-08
タグ: Vue.js

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 依存関係。

インストール vue-template-loader を使用して yarn また npm このような：

# yarn
$ yarn add vue-template-loader

# npm
$ npm install vue-template-loader

JavaScriptのwebpack構成

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

追加 vue-template-loader 原則として、webpack構成ファイルでは次のようになります。

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を使用する場合は、 tsloader と typescript と一緒にプロジェクトにインストールされた依存関係 webpack.

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.js 対応するファイル nest.html. 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のバックグラウンドを持っている人にとっては非常に理解しやすいでしょう。

getdocs

13036