在 Vue 中定义模板的 3 种方法

Question

在 Vue 中定义模板的方法 ，但其中许多在生产环境中效果不佳。 文档甚至建议避免其中一些 。 这里有 3 种方法来定义适用于服务器端渲染的 Vue 组件的模板：

字符串模板

您可以在 vanilla JavaScript 中将模板定义为 字符串文字或模板文字 。 这种方法意味着组件的 HTML 和 JavaScript 保留在同一个文件中，这通常被认为是积极的。 缺点是您没有获得 HTML 语法高亮显示。

Vue.component('app', {
  template: '<h1>{{message}}</h1>',
  data: () => ({ message: 'Hello World' })
});

const app = new Vue({
  template: '<app></app>'
});

const data = await renderToString(app);
// <h1 data-server-rendered="true">Hello World</h1>
data;

您可以使用这种方法，但使用函数来加载字符串。 这会将 HTML 和 JavaScript 拆分为单独的文件，以获得更好的语法突出显示和关注点分离。

Vue.component('app', {
  template: await load('app-template'),
  data: () => ({ message: 'Hello World' })
});

const app = new Vue({
  template: '<app></app>'
});

const data = await renderToString(app);
// <h1 data-server-rendered="true">Hello World</h1>
data;

async function load(template) {
  if (typeof window !== 'undefined') {
    return fetch(template + '.html').then(res => res.text());
  }

  const fs = require('fs');
  return new Promise((resolve, reject) => {
    fs.readFile(`${__dirname}/${template}.html`, 'utf8', (err, res) => {
      if (err != null) {
        return reject(err);
      }
      resolve(res);
    });
  });
}

内联模板

另一种类似于字符串模板的方法是内联模板。 您无需为每个组件定义一个 HTML 模板，而是在一个顶级模板中定义所有组件 HTML。 这类似于 插槽 。

Vue.component('app', {
  template: '<h1>{{message}}</h1>',
  data: () => ({ message: 'Hello World' })
});

const app = new Vue({
  template: '<app></app>'
});

const data = await renderToString(app);
// <h1 data-server-rendered="true">Hello World</h1>
data;

这种方法的优点是您可以在一个模板中定义所有应用程序的 HTML，但仍将业务逻辑分解为单独的组件。

单个文件组件

单个文件组件 在将 HTML 模板放在单独的文件中和将 HTML 模板作为字符串文字之间提供了两全其美的优势。 与字符串文字一样，有关组件的所有内容都在一个地方。 像单独的 HTML 文件一样，您可以获得不错的语法突出显示。

权衡是单个文件组件通常在单独的 .vue具有自己特殊语法的文件。 下面是一个例子 .vue 句法。 根据您的 IDE，您可能需要为 .vue 文件语法高亮。

<template>
  <h1>{{message}}</h1>
</template>

<script>
  module.exports = {
    data: () => ({ message: 'Hello World' })
  };
</script>

所以为了编译你的组件，你需要一个构建步骤。 有许多工具可以为您做到这一点，例如 Browserify 的 Vueify 转换和 Webpack 的 vue -loader 。 在引擎盖下，这两个工具都使用 vue-template-compiler。下面是一个直接使用 vue-template-compiler 将 Vue 语法编译成组件的例子：

const compiler = require('vue-template-compiler');
const parsed = compiler.parseComponent(`
  <template>
    <h1>{{message}}</h1>
  </template>
  <script>
    module.exports = {
      data: () => ({ message: 'Hello World' })
    };
  </script>
`);

// Contains `template`, `data` properties
const appComponent = Object.assign({ template: parsed.template.content },
  eval(parsed.script.content));
Vue.component('app', appComponent);
const app = new Vue({
  template: '<app></app>'
});

const data = await renderToString(app);
// <h1 data-server-rendered="true">Hello World</h1>
data;