vue2报错：error The template requires child element

目录

1.错误描述

2.解决办法

3.代码

---

1.错误描述

        想在App.vue中展示另一个vue页面，结果没有在想展示的vue文件中的template区域写内容，就出现了这个错误。

（1）App.vue

(2)HelloVue.vue

  (3)运行（npm run serve）后出现的错误

2.解决办法

在template区域加上div标签，在div标签中写内容。

3.代码

（1）App.vue

<template>
  <div>
    <!-- 要展示的vue文件 -->
    <hello-vue></hello-vue>
  </div>
</template>
<script>
//导入要展示的文件的路径
import HelloVue from './views/caogao/HelloVue.vue'
export default {
  //注册组件
  components: { HelloVue },
}
</script>

(2)HelloVue.vue

<!-- template定义页面模板 -->
<template>
    <div>
        <h1>Hello vue！</h1>
        <!-- {{  }}：插值表达式，动态展示内容，当数据模型message中的内容发生变化，展示的内容也发生变化 -->
        <h2>动态绑定：{{ message }}</h2>
    </div>
</template>
<!-- script：定义数据模型和方法 -->
<script>
export default {
    //data：定义数据模型
    data() {
        return {
            //数据模型
            message:"你好！"
        }
    },
    //方法
    methods: {
    }
}
</script>
<!--  style定义css样式 --> 
<style></style>