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