vue的单根元素问题及解决方法

1 问题描述：

在进行vue项目开发时，难免遇到各种各样的问题，虽然这些问题和报错会打击我们的自信心，但是只要换个方位思考，问题将成为驱使我们前进的动力。下面小编将以组件模板的单一根元素问题为例，讲解如何使用问题驱动法，解决并拓展想关的问题。

2 实验结果与讨论：

1.于HbuilderX新建一个vue项目，并在APP.vue中增加一个h1标签，按下快捷键alt+c，然后输入命令npm run serve，运行代码后发现页面报错，无法正常显现。

2.打开在HbuilderX终端-外部命令，发现问题是出在我们新建的h1标签

3.为了更好的理解该报错代码，可复制粘贴至百度翻译，并从翻译出的中文中可知，组件模板应当只包含一个根元素，即一个div标签。

4.因此我们知道了不能够直接添加一个div标签在原来的跟元素后面，将这个包含h1的div盒子转移到根元素里面

1. 最后我们在终端运行npm run server，可以发现问题已经成功解决

3 问题拓展：

当我们自己创建一个新的组件遇到以上问题时，终端并不会报错，但在运行时依旧无法正确显示界面，可以推断除了APP.vue ，自己创建的组件也只能包含一个根元素！

实习编辑：李欣容

稿件来源：深度学习与文旅应用实验室（DLETA）