Sử dụng vue-template-loader với Vue.js để biên dịch các mẫu HTML

Hầu hết những người quen thuộc với Angular 2+ đều biết rằng để biên dịch các mẫu HTML, người ta chỉ cần thêm một url mẫu vào file TypeScript của thành phần và thực hiện với nó. Với Vue, đề xuất là thay vào đó sử dụng các thẻ mẫu để xây dựng đánh dấu mẫu của bạn trong phần lớn các trường hợp.

Ta có thể sử dụng vue-template-loader nếu ta muốn sử dụng Vue với Angular-way of building template. Vì vue-template-loader hỗ trợ vue-class-component ta có thể sử dụng trình trang trí trên các lớp cho các thành phần theo kiểu lớp.

vue-template-loader biên dịch HTML thành các hàm hiển thị riêng lẻ trong các file TypeScript hoặc JavaScript tương ứng.

Cài đặt

Ta cần một dự án Vue.js hạt giống điển hình, cùng với webpack phụ thuộc vào webpack .

Cài đặt vue-template-loader bằng yarn hoặc npm như sau:

# yarn
$ yarn add vue-template-loader

# npm
$ npm install vue-template-loader

Cấu hình webpack cho JavaScript

Bây giờ ta có thể tích hợp vue-template-loader bằng cách sử dụng webpack .

Thêm vue-template-loader làm luật trong file cấu hình webpack của bạn:

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/,
        }
    ]
  }
}

Kết xuất các nội dung được sử dụng trong file HTML của ta như xử lý thuộc tính src của thẻ ** có thể được chỉ định với các tùy chọn:

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'
          }
        }
      }
    ]
  }
}

Xin lưu ý để các tùy chọn trên hoạt động, ta cũng cần thêm một trình tải để xử lý các file hình ảnh (xem trình tải file ).

Cấu hình TypeScript

Nếu ta muốn sử dụng vue-template-loader với nguyên cảo ta cần phải có tsloader và typescript phụ thuộc được cài đặt trong các dự án cùng với webpack .

vue-template-loader được sử dụng theo cùng một cách trong cấu hình của webpack cho cả JavaScript và TypeScript.

Việc bổ sung chỉ sẽ nằm trong folder typings của dự án của ta . Ta cần phải thêm shim sau trong typings folder để làm nguyên cảo hiểu file .vue:

// 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
}

Sử dụng trong các file Javascript / Typescript

Bây giờ, hãy tạo một ví dụ với file mẫu mà ta sẽ gọi là nest.html :

nest.html

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

Hãy thêm một file nest.js tương ứng với nest.html . Ta có thể sử dụng vue-template-loader có hoặc không có trình trang trí lớp khi sử dụng es6 với Vue :

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!');
  }
}

Nó cũng được dùng trong TypeScript như sau:

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!');
  }
};

Kết luận

Sử dụng vue-template-loader cung cấp hỗ trợ tuyệt vời cho TypeScript và cũng có thể giảm số lượng file được biên dịch vì nó loại bỏ file .vue . Cuối cùng, nó có thể thực sự dễ hiểu đối với những người đến từ nền tảng Angular.

Tags:

Các tin liên quan

Nhận và thiết lập thẻ meta HTML trong Angular
2017-11-27
Hiển thị HTML thô trong ứng dụng Vue của bạn
2017-06-26
Nén HTML của bạn trong Jekyll
2017-01-17
Sử dụng DOMParser để phân tích cú pháp các chuỗi HTML
2016-10-21
Tham chiếu thuộc tính mục tiêu cho thẻ neo trong HTML
2016-09-12
HTML AMP, Tổng quan
2016-06-29
Cách bảo vệ trang web WordPress của bạn khỏi Genericons Example.html Lỗ hổng XSS
2015-05-07