Javascript VueJS2模板

我是VueJS的新学生

我做了一个MainTemplate.vue，有一个菜单，页脚，页眉。。。 因此，请创建另一个名为ComponentB.vue的.vue

这是我的代码组件b.vue

这么简单。我将它导入到MainTemplate.vue中，效果很好。 但是我不知道为什么如果这个模板组件b.vue有很多代码，它将无法工作

看，我只需向我的组件eb.vue添加更多代码

保存时，浏览器会向我显示以下错误：

为什么我不能在里面放更多的代码？有人能帮我吗

---

非常感谢

它就在错误消息中：

组件模板应该只包含一个根元素

将ComponentB.vue模板的内容包装在div中，使其具有一个根元素：

<template>  
  <div>
    <h1>Component B</h1>
    <h1>Component B</h1>
    <h1>Component B</h1>
    <h1>Component B</h1>
    <h1>Component B</h1>
    <h1>Component B</h1>
  </div>
</template>  

<template>  
    <h1>Component B</h1>
    <h1>Component B</h1>
    <h1>Component B</h1>
    <h1>Component B</h1>
    <h1>Component B</h1>
    <h1>Component B</h1>
</template>  

client?cd17:139 ./~/vue-loader/lib/template-compiler?{"id":"data-v-4e4e09bc","hasScoped":false}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/ComponenteB.vue
(Emitted value instead of an instance of Error) 
  Error compiling template:

  <h1>Component B</h1>
  <h1>Component B</h1>
  <h1>Component B</h1>
  <h1>Component B</h1>
  <h1>Component B</h1>
  <h1>Component B</h1>

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/ComponenteB.vue 6:2-198
 @ ./src/routes.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

<template>  
  <div>
    <h1>Component B</h1>
    <h1>Component B</h1>
    <h1>Component B</h1>
    <h1>Component B</h1>
    <h1>Component B</h1>
    <h1>Component B</h1>
  </div>
</template>