Question

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

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

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

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

但是我希望能够在String模板中使用pug。

Answer 1

我们使用x模板在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转换步骤。

Answer 3

要以@Graham的答案为基础，还可以仅使用：

//- In the Pug file
script#my-component-template(type="text/x-template")
  div
    div

然后

// In the Javascript file
Vue.component('MyComponent', {
    template: '#my-component-template',
});

例如，如果您正在制作Codepen.io笔，我认为这种方法更干净。 Pug转到“ HTML”框（安装Vue的元素之外），而Javascript转到“ JS”框。

如何在Pug中定义Vue模板？

3 个答案: