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

要建立在@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"框。