【前端】vue 报错：The template root requires exactly one element

写在最前面Prettier - Code formatter插件解决 Vue 报错：The template root requires exactly one element错误原因示例

解决方法更复杂的示例使用 Fragment 解决问题

小结

写在最前面

封面图内含彩蛋 ~

原因：

Vue2要求模板中的<code><template>中只能有一个根元素，也就是说最外层不能同时包含其他元素或者文本。如果模板中出现多个根元素，就会触发这个错误。

解决：

vue2：所以，删除多的根元素，or在最外层再加一个div包裹其他根元素

vue3中，则去掉了这个限制。引入了一个新的特性叫做 Fragment，这允许我们在不需要额外的 DOM 元素的情况下使用多个根元素。

可以参考

https://blog.csdn.net/Y_soybean_milk/article/details/124338835

附言：如果你是用vue3，建议用Volar来替换vetur

参考：https://blog.csdn.net/a417125111/article/details/100996750

Prettier - Code formatter插件

此外，建议安装vue代码格式化插件，提升vue编程幸福感

在扩展商店中搜索（ Prettier - Code formatter ）点击安装

参考：https://blog.csdn.net/qq_38188228/article/details/118295851

解决 Vue 报错：The template root requires exactly one element

在使用 Vue.js 开发前端应用时，可能会遇到这样的错误提示：“The template root requires exactly one element”（模板根需要一个且仅一个元素）。这个错误是由于 Vue 的模板系统的一个基本要求造成的，即每个组件的模板必须有且仅有一个根元素。下面我们来深入探讨这个问题并提供解决方案。

错误原因

Vue.js 要求每个组件的模板都应该有一个根元素，这是为了保证组件的结构清晰且在虚拟 DOM 中能正确地进行渲染和更新。如果模板中有多个根元素，Vue 无法确定这些元素之间的关系，从而导致渲染错误。

示例

例如，下面的代码会引发这个错误：

<template>

<div class="header">Header</div>code>

<div class="content">Content</div>code>

</template>

在这个示例中，模板中包含两个根元素 <div class="header">code> 和 <div class="content">code>。因为 Vue 只能接受一个根元素，所以会抛出错误。

解决方法