VueJS爬坑记(1) - 关于在单文件中的根节点

前言

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

起因

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

寻找解决方案

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

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

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

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

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

随后我Google了这句话,结果在GitHub中找到了想要的结果:
http://lenconda.top/images/17112302.png

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

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

总结

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

将最新的文章发送到你的邮箱

展示评论