VueJS 2模板

Question

我是新的VueJS学生！

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

这是我的代码ComponentB.vue

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

太简单了。我把这个导入到我的"MainTemplate.vue“中，它运行得很好。但是我不知道为什么如果这个模板"ComponentB.vue“有很多代码，它就不能工作。

听着，我简单地向我的"ComponenteB.vue“添加了更多的代码

<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

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

非常感谢！！

Answer 1

它就在错误信息中：

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

将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>