Vue SFC 模板生成构建错误

Question

Vue.js 完全新手。 我正在关注 Kirby CMS 团队制作的教程。

Vue 正在使用 [电子邮件受保护] 进行构建，作为 KirbyUp 捆绑程序的一部分。

因此，我可以获取教程中下面显示的代码来成功构建并按预期渲染到浏览器中。

<template>
  <k-field class="k-doi-field" :label="label">
    <k-input theme="field" type="text" name="textfield" :value="value" @input="onInput" />
  </k-field>
</template> 

<script>
    export default {
      props: {
        label: String,
        value: String
      }
    }
</script>

<style>

</style>

当我使用模板执行任何事情时，我都会遇到构建错误。在模板标签中添加 lang="html" 吗？构建错误。在模板中添加 H2？构建错误。

构建错误很有帮助“ERROR Build failed”

图片：构建错误列表

有人能好心地解释一下这里发生了什么吗..？

导致构建错误的代码示例：

<template lang="html">
  <k-field class="k-doi-field" :label="label">
    <k-input theme="field" type="text" name="textfield" :value="value" @input="onInput" />
  </k-field>
</template> 

<script>
    export default {
      props: {
        label: String,
        value: String
      }
    }
</script>

<style>

</style>

<template>
  <h2>Test</h2>
  <k-field class="k-doi-field" :label="label">
    <k-input theme="field" type="text" name="textfield" :value="value" @input="onInput" />
  </k-field>
</template> 

<script>
    export default {
      props: {
        label: String,
        value: String
      }
    }
</script>

<style>

</style>

Answer 1

kirbyup

使用Vue 2，似乎没有明确说明这一点，但这是几年前开始的项目中可以预期的。

Vue 2 可能不支持您对模板所做的这两项更改。模板不能有多个根，这意味着

h2

和

k-field

应该用另一个元素包装才能使其工作。

lang="html"

是多余的，没有什么好处。根据工具的不同，它可能“不支持”，这里就是这种情况。 lang 事实上由加载器支持，但从 Vue 3 开始才在 SFC 规范中提及。如果打算使用Vue 3，则在4.x中添加了支持。它目前处于 alpha 阶段，您需要注意，它可以在

next

标签下访问：

npx kirbyup@next ...