如何在哈巴狗中定义vue模板？

Question

如何让Vue.js在String模板中识别Pug？例：

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

我看到了如何在独立模板中完成此操作，如：

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

但我希望能够在String模板中使用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>

Answer 2

我认为这不是一个选择。那些String模板在客户端上编译，这也需要在那里进行Pug转换步骤。