Vue main.js 引入其他组件不显示

Question

可以显示出来的写法
main.js

import App from "./vue/App.vue";
new Vue({
    el: "#app",
    template: `
        <App></App>
    `,
    data: {

    },
    methods: {
        
    },
    components: {
        App: App
    }
})

App.vue

<template>
    <div>
        <h2>{{message}}</h2>
        <button @click="btnClick">按钮</button>
        <h2>{{name}}</h2>
        <Cpp></Cpp>
    </div>
</template>

<script>
    import Cpp from "./Cpp"
    export default {
        data() {
            return {
                message: "Hello Webpack",
                name: "Webpack Vue"
            }
        },
        methods: {
            btnClick() {
                console.log("123456");
            }
        },
        components: {
            Cpp
        }
    }
</script>

<style>
    .title {
        color: yellow
    }
</style>

Cpp.vue

<template>
  <div>
      <h2>我是Cpp组件</h2>
  </div>
</template>

<script>
export default {
    data() {

    },
    methods: {
        
    }
}
</script>

<style>

</style>

不可显示出来的写法

main.js

import App from "./vue/App.vue";
import Cpp from "./vue/Cpp.vue";

new Vue({
    el: "#app",
    template: `
        <Cpp></Cpp>
        <App></App>
    `,
    data: {

    },
    methods: {
        
    },
    components: {
        Cpp: Cpp,
        App: App
    }
})

App.vue

<template>
    <div>
        <h2>{{message}}</h2>
        <button @click="btnClick">按钮</button>
        <h2>{{name}}</h2>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                message: "Hello Webpack",
                name: "Webpack Vue"
            }
        },
        methods: {
            btnClick() {
                console.log("123456");
            }
        },
        components: {

        }
    }
</script>

<style>
    .title {
        color: yellow
    }
</style>

正确显示

错误显示

我只是将Cpp.vue放在main.js中引入，只会显示第一个引入的组件,后面的App显示不出来这是为啥？

Answer 1

只能有一个根实例

Answer 2

import App from "./vue/App.vue";
import Cpp from "./vue/Cpp.vue";

new Vue({
    el: "#app",
    template: `
        <div>
            <Cpp></Cpp>
            <App></App>
        </div>
    `,
    data: {

    },
    methods: {
        
    },
    components: {
        Cpp: Cpp,
        App: App
    }
})

main.js 改成这样就可以了