想用這種方式實作元件巢狀：

<p id="app">
    <app-content>
        <my-header></my-header>
        <my-footer></my-footer>
    </app-content>
</p>

目前實作的方式：是在app-content.vue中的template中嵌套的

index.html

<p id="app">
    <app-content> </app-content>
</p>

main.js

import Vue from '../node_modules/vue/dist/vue';
import app from './app.js';
new Vue(app);

app.js

import content from '../components/app-content.vue'
module.exports={
    el:"#app",
    data:{},
    components:{
        appContent:content
    }
};

app-content.vue

<template>
    <p id="content">
        <my-header></my-header>
        <my-footer></my-footer>
    </p>
</template>
<style>
    #content{
        height: 100vh;
        width: 100vw;
        background: rgb(240,240,240);
        position: relative;
    }
</style>
<script>
    import myHeader from './app-top.vue';
    import myFooter from './app-bottom.vue';
    export default {
        components:{
            myHeader,
            myFooter
        }
    }
</script>