、引入公共组件 （common: header  footer ）

1.全局引入 在 vue 的 main.js 中引入  （注：底部组件放在router-view下面自动显示在页面底部）

import Header from'./components/common/Header.vue' //文件所在位置

Vue.component("Header",Header) //第一个参数是你所起的别名

import Footus from'./components/common/Footus.vue'

Vue.component("Footus",Footus)

<template>
  <div id="app">
    <Header></Header> //头部组件
    <router-view /> //显示页面内容
    <Footus></Footus> //底部组件
  </div>
</template>

2.局部引入 在需要 header 的部分页面直接引入

<template>
<Header></Header>//直接引用
</template>

<script>
import Header from'../components/common/Header.vue'
//Vue.component("Header",Header)
export default {
  components: {
    Header  //添加注册组件事件
  },
}
</script>