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

---

🌈你好呀！我是 是Yu欸 🌌 2024每日百字篆刻时光，感谢你的陪伴与支持 ~ 🚀 欢迎一起踏上探险之旅，挖掘无限可能，共同成长！

---

写在最前面

封面图内含彩蛋 ~

原因：
Vue2要求模板中的<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>
  <div class="content">Content</div>
</template>

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

解决方法

要解决这个问题，我们只需确保模板中只有一个根元素，可以通过将所有内容包裹在一个父元素中来实现。修改后的代码如下：

<template>
  <div>
    <div class="header">Header</div>
    <div class="content">Content</div>
  </div>
</template>

现在，所有内容都被包裹在一个 <div> 元素中，模板中只有一个根元素，错误也就消失了。

更复杂的示例

在实际开发中，模板结构可能会更加复杂。例如，我们可能会使用多个组件并列展示：

<template>
  <MyHeader />
  <MyContent />
</template>

这同样会引发错误，因为这里也有两个根元素。解决方法是将它们包裹在一个父元素中：

<template>
  <div>
    <MyHeader />
    <MyContent />
  </div>
</template>

使用 Fragment 解决问题

在 Vue 3 中，引入了一个新的特性叫做 Fragment，这允许我们在不需要额外的 DOM 元素的情况下使用多个根元素。通过使用 <template> 标签，我们可以解决这个问题：

<template>
  <template>
    <MyHeader />
    <MyContent />
  </template>
</template>

在这个例子中，我们使用了嵌套的 <template> 标签来包裹多个根元素，从而避免了引入额外的 DOM 元素。

小结

“The template root requires exactly one element” 错误是 Vue.js 开发中常见的问题，但只要理解了其原因和解决方法，就能轻松应对。无论是通过包裹一个父元素还是利用 Vue 3 的 Fragment 特性，都能保证我们的组件模板结构正确，避免错误的发生。

希望这篇博客能帮助你更好地理解和解决 Vue 中的这个常见错误。如果有任何问题或建议，欢迎在评论区交流。Happy coding!

---

hello，我是 是Yu欸 。如果你喜欢我的文章，欢迎三连给我鼓励和支持：👍点赞 📁 关注 💬评论，我会给大家带来更多有用有趣的文章。
原文链接 👉 https://blog.csdn.net/WTYuong/article/details/139996116 ，⚡️更新更及时。

欢迎大家添加好友交流。