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 템플릿의 내용을 포함해야 :

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