Component template should contain exactly one root element 完美解决方法

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

在这里记录一下自己初学vue时遇到的问题以及解决方法，希望可以对其他人有所帮助。
写这篇文章的原因也是因为目前很多文章都不适合新手，所以自己想写一个真正适合新手的简单易懂的解决问题的方法。

---

一、查看报错信息

这里大概意思是组件只允许有一个根节点，通俗理解是只能有一个父div，不允许两个同级div的出现。

二、解决方法

知道出错原因，问题就很好解决了，只需要用一个大div将其他div包起来即可。

代码如下（示例）：

<div>
    <div>
        <h3>用户名: {{ username }}</h3>
        
        <input type="text" v-model.trim="pwd">
    </div>
    <div>
        
    </div>
</div>