使用 vue-template-loader 和 Vue.js 编译 HTML 模板

大多数熟悉 Angular 2+ 的人都知道,为了编译 HTML 模板,只需要在组件的 TypeScript 文件中添加一个模板 url,并用它完成。

我们可以使用 vue-template-loader如果我们想使用 Vue 与构建模板的 Angular-way. 由于 vue-template-loader支持vue-class-component,我们可以在类型式组件的类上使用装饰器。

<$>[注意] vue-template-loader 将 HTML 编译成相应的 TypeScript 或 JavaScript 文件中的个别渲染函数。

安装

我们需要一个典型的种子Vue.js项目,以及webpack依赖。

安装vue-template-loader使用yarn或npm如下:

1# yarn
2$ yarn add vue-template-loader
3
4# npm
5$ npm install vue-template-loader

用于 JavaScript 的 webpack 配置

现在我们可以使用webpack集成 **vue-template-loader。

将vue-template-loader作为您的 webpack config 文件的规则:

 1[label webpack.config.js]
 2module.exports = {
 3  module: {
 4    rules: [
 5        {
 6          test: /\.html$/,
 7          loader: 'vue-template-loader',
 8          // We don't want to pass `src/index.html` file to this loader.
 9          exclude: /index.html/,
10        }
11    ]
12  }
13}

在我们的 HTML 文件中使用的资产的渲染就像处理 ** 标签的 src 属性一样可以指定选项:

 1[label webpack.config.js]
 2module.exports = {
 3  module: {
 4    rules: [
 5      {
 6        test: /\.html$/,
 7        loader: 'vue-template-loader',
 8
 9        // We don't want to pass `src/index.html` file to this loader.
10        exclude: /index.html/,
11        options: {
12          transformToRequire: {
13            img: 'src'
14          }
15        }
16      }
17    ]
18  }
19}

请注意,要使上述选项工作,我们还需要添加一个加载器来处理图像文件(参见 file-loader)。

TypeScript 配置

如果我们想与TypeScript使用 vue-template-loader,我们需要在项目中安装的tsloader和typescript依赖性以及webpack。

<$>[注意] vue-template-loader 以相同的方式用于 JavaScript 和 TypeScript 的 webpack 配置。

我们需要在打字文件夹中添加下面的Shim,以使TypeScript理解.vue文件:

 1// To make TypeScript understand/import *.vue files, this shim is required
 2declare module '*.vue' {
 3  import Vue from 'vue';
 4  export default Vue;
 5}
 6
 7// TypeScript type module definition required for vue-template-loader
 8declare module '*.html' {
 9  import Vue, { ComponentOptions } from 'vue';
10
11  interface WithRender {
12    <V extends Vue>(options: ComponentOptions<V>): ComponentOptions<V>
13    <V extends typeof Vue>(component: V): V
14  }
15
16  const withRender: WithRender
17  export = withRender
18}

在 JavaScript / Typescript 文件中使用

现在,让我们用一个模板文件创建一个示例,我们将称之为nest.html:

1[label nest.html]
2<div class="nest">
3  <p>{{ text }}</p>
4  <button type="button" @click="baz()">Click Me!</button>
5</div>

我们可以使用 vue-template-loader与或无类别装饰器,当使用es6与Vue:

 1[label nest.js]
 2// Without class decorators in javascript
 3import withRender from './nest.html';
 4
 5export default withRender({
 6  data () {
 7    return {
 8      text: 'I\'m an alligator'
 9    };
10  },
11  methods: {
12    baz () {
13      console.log('Clicked!');
14    };
15  };
16});

 1[label nest.js]
 2// With decorators
 3import Vue from 'vue';
 4import Component from 'vue-class-component';
 5import WithRender from './nest.html';
 6
 7@WithRender
 8@Component
 9export default class Nest extends Vue {
10  text = 'I\'m an alligator!';
11
12  baz() {
13    console.log('Clicked!');
14  }
15}

它也可以在 TypeScript 中使用,如下:

 1[label nest.ts]
 2import Vue from 'vue';
 3import { Component } from 'vue-property-decorator';
 4import WithRender from './nest.html';
 5
 6@WithRender
 7@Component({})
 8export default class NestComponent extends Vue {
 9  data(){
10    return {
11      text: 'I\'m an alligator!'
12    }
13  };
14
15  baz(){
16    console.log('clicked!');
17  }
18};

结论

使用 vue-template-loader为TypeScript提供了很好的支持,并且可以减少要编译的文件数量,因为它消除了.vue 文件。