javascript - 如何在 pug 中定义 vue 模板？

Question

如何让 Vue.js 识别字符串模板中的 Pug？示例:

Vue.component('my-component', {
  template: `
    div
      div`})

我看到了如何在独立模板中完成此操作，如下所示:

<template lang='pug'>
  div
    div
</template>

但我希望能够在字符串模板中使用 pug。

Answer 1

我们使用 x-template 在我们的 vue 模板中使用 pug，这是一个 shell 组件:

script(type="text/x-template" id="admin-tags")
  div
    h1 Admin Tags
script.
  var AdminTags = Vue.component('admin-tags', {
    template: "#admin-tags",
    props: ["options"],
    data: function(){
      return {
      }
    }
  });

然后我们只需将包含组件的文件包含在父模板中。效果非常好。

更新 04/2019:我最近开始了一个使用 vue-cli 和 vue-cli-plugin-pug 的新项目一直工作得很好。就这么简单:

<template lang='pug'>
  div
    h1 Home
    ul
      li A
      li B
      li C
</template>

<script>

export default {
  name: 'Home',
  data () {
    return {
    }
  }
}
</script>