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

これは、エラーメッセージに権利があります：

コンポーネントテンプレートは、それが1つのルート要素を持つように、divの中にあなたのComponentB.vueテンプレートの内容をラップし、正確に1つのルート要素

が含まれている必要があります：

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