VUE 页面根对象报错解决

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

vue菜鸟一枚，下载github上的代码来框架和思路，添加自己新的代码调试的时候，发现了一个错误，，具体报错如：

1 2 3 4 5 6 7 8 9 10 11 12

error  in ./src/components/page/Test.vue   (Emitted value instead of an instance of Error)   Vue template syntax error:     Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.      @ ./src/components/page/Test.vue 5:2-167  @ ./src/router/index.js  @ ./src/main.js  @ multi ./build/dev-client babel-polyfill ./src/main.js

　刚开始这样写得时候是没有发现啥错误的，我只是在后面添加一个<div></div>或是加了别的就说出现这个错误

1 2 3

<template>     <el-button type="primary">{{test1}}</el-button> </template>

　　原来vue模板只能有一个根对象

所以你想要出现正常的效果，你的用一个div来或是别的标签来包裹全部的元素

正确的写法就是：

1 2 3 4 5 6 7 8

<template>     <div>         <el-button type="primary">haha1</el-button>         <div>hahhaa</div>         <el-input type="text" placeholder="测试一下"></el-input>         <h1>{{test1}}</h1>     </div> </template>