VueJS 2 Vorlagen

Question

Ich bin ein neuer VueJS Student!

ich ein "MainTemplate.vue" gemacht, gibt es ein Menü, Footer, Header ... eine andere .vue So erstellen namens "ComponentB.vue".

Hier ist mein Code ComponentB.vue

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

So einfach. Ich importierte dies zu meinem "MainTemplate.vue" und es funktionierte gut. Aber ich weiß nicht warum, wenn diese Vorlage "ComponentB.vue" eine Menge Code hat, wird es nicht funktionieren.

Hören Sie, ich einfach mehr Code zu meinem "ComponenteB.vue" add

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

Wenn ich speichern, den Browser zu mir dieses Fehler:

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 

Warum i kann nicht mehr Code hinein? Kann mir bitte jemand helfen?

Vielen Dank !!

Answer 1

Es ist in der Fehlermeldung rechts gibt es:

Component Vorlage

Wrap den Inhalt Ihrer ComponentB.vue Vorlage in einem div genau ein Wurzelelement enthalten sollte, so dass es ein Wurzelelement hat :

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