Hm-Footer.vue

<template><div class="hm-footer">我是hm-footer</div></template><script>export default {}</script><style>.hm-footer{height:100px;line-height:100px;text-align:center;font-size:30px;background-color:#4f81bd;color:white;}</style>

 Hm-Main.vue

<template><div class="hm-Main">我是hm-Main</div>
</template><script>
export default {}
</script><style>
.hm-Main{height:400px;line-height:400px;text-align:center;font-size:30px;background-color:#f79646;color:white;margin:20px 0;
}
</style>

Hm-Header.vue 

<template><div class="hm-header">我是hm-header</div>
</template><script>
export default {}
</script><style>
.hm-header{height:100px;line-height:100px;text-align:center;font-size:30px;background-color:#8064a2;color:white;
}
</style>

<template><div class="App"><!-- 头部组件 --><HmHeader></HmHeader><!-- 主体组件 --><HmMain></HmMain><!-- 底部组件 --><HmFooter></HmFooter><!-- 创建组件、导入、注册使用 --></div>
</template><script>
import HmHeader from './components/HmHeader.vue';
import HmFooter from './components/Hm-Footer.vue';
import HmMain from './components/Hm-Main.vue';
export default {components:{//'组件名':组件对象HmHeader:HmHeader,HmFooter,HmMain}}
</script><style>
.App{width:600px;height:700px;background-color:#87ceed;margin:0 auto;padding: 20px;/* 内边距 */}</style>

main.js知识点 

//文件核心作用：导入App.vue,基于App.vue创建结构渲染index.html
//1.导入Vue核心包
import Vue from 'vue'
//2.导入App.vue根组件
import App from './App.vue'//提示：当前处于什么环境（生产环境/开发环境）
Vue.config.productionTip = false//3.Vue实例化，提供render方法->基于App.vue创建结构渲染index.html
new Vue({//el:'#app',作用:和.$mount('选择器')作用一致，用于指定Vue所管理容器//render: h => h(App),render:(createElement)=>{//基于App创建元素结构return createElement(App)}
}).$mount('#app')