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

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”框。