前言

最近在通过Vue-cli配合Webpack构建VueJS应用学习VueJS，但是由于对NodeJS用法和Webpack语法不熟悉，导致错误的排查很困难。所以，我准备在博客里开一个专栏记录VueJS爬坑过程。顺便结合VueJS学习ES6的语法。

起因

最近开始接触VueJS的脚手架工具vue-cli，并逐步了解VueJS的单文件组件的写法。在最近的某一天，我使用单文件创建了一个导航栏的组件Navbar.vue，并希望将其引入视图入口文件/src/App.vue中，结果页面突然抛出一段报错信息，截图如下（情景再现）：

寻找解决方案

首先，得到这个信息，就基本上可以确定是/src/App.vue出现了问题，而且一定是引入了组件之后产生的；

这种NodeJS的报错对于我来说还是十分陌生的，，这一报错也让我措手不及，最开始我还以为是我引入组件的语法或者路径出现了错误，但是仔细检查之后发现并没有此类问题；

于是我又返回报错页面查看报错信息，终于从结尾处找到了一条貌似有用的信息

• Component template should contain exactly one root element. If you are using v-if ...

仔细琢磨这句话我好像明白了点什么，“组件模板必须包含一个根组件”。但是我并没有完全弄明白是怎么回事，只是再一次印证了我的想法；

随后我Google了这句话，结果在GitHub中找到了想要的结果：

我终于反应过来一个单文件组件不可以同时在<template></template>中包含两个标签，像如上代码<nav-bar></nav-bar>和<div></div>在同一层，VueJS将无法渲染。

将<nav-bar></nav-bar>放进<div></div>中，问题解决。

总结

经历过这次的报错，我知道了：
单文件组件中只容许一个根节点！！！