1、在body标签里创建内容模板

<template id="header"> 
  <div>我是头部区域</div>
</template>

2、script里设置局部组件(局部实例)

let myHeader = {
  template: `#header`
}

3、将子组件放进components中

let vm = new Vue({
  el: '#app',
  data: {},
  // 3、将子组件放进components中 
  components: {
    myHeader,
    myBody,
    myFooter,
    myNav
  }
})

4、使用

<div id="app">
  <!-- 4 -->
  <my-header></my-header>
  <my-nav></my-nav>
  <my-body></my-body>
  <my-footer></my-footer>
</div>

代码演示：

全代码：

<div id="app">
  <!-- 4 -->
  <my-header></my-header>
  <my-nav></my-nav>
  <my-body></my-body>
  <my-footer></my-footer>
</div>
<!-- 1、在body标签里创建内容模板 --> <template id="header">
  <div>我是头部区域</div>
</template> <template id="nav">
  <div class="nav">
    <div class="m2">
      <nav>
        <ul>
          <li v-for="(item, index) in menu"><a :href="item.url" target="_blank">{{item.text}}</a></li>
        </ul>
      </nav>
    </div>
  </div>
</template> <template id="body">
  <div>我是主体区域</div>
</template> <template id="footer">
  <div>我是页脚区域</div>
</template>

CSS

* {
  margin: 0;
  padding: 0;
}

.nav {
  height: 50px;
  background-color: #336699;
}

.m2 {
  width: 1130px;
  margin-left: auto;
  margin-right: auto;
}

.m2 ul {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.m2 li {
  float: left;
  list-style-type: none;
}

a {
  text-decoration: none;
  color: #fff;
}

JavaScript

let myHeader = {
  template: `#header`
}
let myNav = {
  template: `#nav`,
  data: function () {
    return {
      menu: [{
        id: 1,
        text: '首页',
        url: 'http://www.wmq.ink'
      }, {
        id: 2,
        text: '全网营销',
        url: 'http://www.wmq.ink'
      }, {
        id: 3,
        text: '技术研发',
        url: 'http://www.wmq.ink'
      }, {
        id: 4,
        text: '运营管理',
        url: 'http://www.wmq.ink'
      }, {
        id: 5,
        text: '客户案例',
        url: 'http://www.wmq.ink'
      }, {
        id: 6,
        text: '解决方案',
        url: 'http://www.wmq.ink'
      }, {
        id: 7,
        text: '新闻中心',
        url: 'http://www.wmq.ink'
      }, {
        id: 8,
        text: '关于我们',
        url: 'http://www.wmq.ink'
      }]
    }
  }
}
let myBody = {
  template: `#body`
}
let myFooter = {
  template: `#footer`
}
// 根实例(根组件) 
let vm = new Vue({
  el: '#app',
  data: {},
  // 3、将子组件放进components中
  components: {
    myHeader,
    myBody,
    myFooter,
    myNav
  }
})

代码演示：