将Vue模板编译为包含HTML的字符串

问题描述

我正在使用vue为Storybook中的几个组件建立原型，我只需要HTML部分供以后使用。 因此，我正在考虑编译vue模板，但是我不确定是否已经有可用的工具，或者我将如何使用它。

例如，我所拥有的是这三个组成部分：

// PrimaryButton.vue
<template>
  <button class="plr-button -primary">{{ label }}</button>
</template>

<script>
export default {
  name: "PrimaryButton",props: ['label']
}
</script>

// SecondaryButton.vue
<template>
  <button class="plr-button -secondary">{{ label }}</button>
</template>

<script>
export default {
  name: "SecondaryButton",props: ['label']
}
</script>

// ButtonGroup.vue
<template>
  <div class="plr-button-group">
    <primary-button :label="label1"></primary-button>
    <secondary-button :label="label2"></secondary-button>
  </div>
</template>

<script>
export default {
  name: "ButtonGroup",components: {
    'primary-button': PrimaryButton,'secondary-button': SecondaryButton,},props: ['label1','label2']
}
</script>

我想要作为ButtonGroup的已编译HTML字符串是这样的：

<div class="plr-button-group">
  <button class="plr-button -primary">{{ label }}</button>
  <button class="plr-button -secondary">{{ label }}</button>
</div>

我知道我可以使用一些AST转换来完成所有这些工作，但是我认为在vue生态系统中可能已经有些东西可以实现这一目标。我不想替换模板中的道具，除了复合组件之外，没有任何vue绑定。

有人知道如何获得理想的结果吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）