如何在 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>