组件注册：局部(app.vue,import,components，组件标签）全局（main.js，import,vue.component,-组件标签)

一键生成三个部分：

安装vetur插件

<vue然后回车，即可生成
 

组件注册：局部

在根组件script中导入其他组件，在cmponents中进行组件注册，在template中进行组件标签的展示（写组件标签：写Header然后Tab快速生成）
ctrl+d选中相同的，然后进行修改）


App组件

<template>
  <div class="App">
  <!-- 头部组件 -->
   <Header></Header>
   <!-- 主体组件 -->
    <Main></Main>
  <!-- 底部组件 -->
   <Footer></Footer>
  </div>

</template>

<script>
import Header from './components/Header.vue'
import Main from './components/Main.vue'
import Footer from './components/Footer.vue'

export default {
  components:{
    // '组件名'：组件对象（俩写一样就直接写一个）
    Header,
    Main,
    Footer
  }
}
</script>

<style>
.App{
  width: 600px;
  height: 700px;
  background: white;
  margin:0 auto ;
}

</style>

Main组件

<!-- 主体组件 -->
<template>
  <div class="Main">
   我是Main
  </div>
</template>

<script>
export default {

}
</script>

<style>
.Main {
 height: 400px;
 line-height: 100;
 text-align: center;
 font-size: 30px;
 background-color: pink;
 color: white;
 margin: 20px 0;
}

</style>

Header组件

<!-- 头部组件 -->
 <template>
   <div class="header">
    我是Header
   </div>
 </template>

 <script>
 export default {

 }
 </script>

 <style>
 .header {
  height: 100px;
  line-height: 100;
  text-align: center;
  font-size: 30px;
  background-color: blue;
  color: white;
 }

 </style>

尾部组件

<!-- 尾部组件 -->
<template>
  <div class="Footer">
   我是Footer
  </div>
</template>

<script>
export default {

}
</script>

<style>
.Footer {
 height: 100px;
 line-height: 100;
 text-align: center;
 font-size: 30px;
 background-color: yellow;
 color: white;
 margin: 20px 0;
}

</style>

组件注册：全局（所有组件内都能使用）

前提是已经将Header和Main和Footer组件在App.vue组件中引用注册显示
然后在项目入口文件main.js中全局注册HmBut组件（导入+注册）

最后将HmBut以组件标签形式写入到Header和Main和Footer中

main.js项目入口文件

import Vue from 'vue'
import App from './App'
import router from './router'
import HmBut from './components/HmBut'

Vue.config.productionTip = false
Vue.component('HmBut', HmBut)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

Header

<!-- 头部组件 -->
<template>
  <div class="header">
   我是Header
   <HmBut></HmBut>
  </div>
</template>

<script>
export default {
  name: 'Header'

}
</script>

<style>
.header {
 height: 100px;
 line-height: 100px;
 text-align: center;
 font-size: 30px;
 background-color: blue;
 color: white;
}

</style>

Main

<!-- 主体组件 -->
<template>
  <div class="Main">
   Main
   <HmBut></HmBut>
  </div>
</template>

<script>
export default {
  name: 'Main'

}
</script>

<style>
.Main {
 height: 400px;
 line-height: 100px;
 text-align: center;
 font-size: 30px;
 background-color: pink;
 color: white;
 margin: 20px 0;
}

</style>

Footer

<!-- 尾部组件Footer -->
<template>
  <div class="Footer">
   我是Footer
   <HmBut></HmBut>
  </div>
</template>

<script>
export default {
  name: 'Footer'

}
</script>

<style>
.Footer {
 height: 100px;
 line-height: 100px;
 text-align: center;
 font-size: 30px;
 background-color: yellow;
 color: white;
 margin: 20px 0;
}

</style>

App

<template>
  <div class="App">
  <!-- 头部组件 -->
   <Header></Header>
   <!-- 主体组件 -->
    <Main></Main>
  <!-- 底部组件 -->
   <Footer></Footer>
  </div>

</template>

<script>
import Header from './components/Header.vue'
import Main from './components/Main.vue'
import Footer from './components/Footer.vue'

export default {
  components: {
    // '组件名'：组件对象（俩写一样就直接写一个）
    Header,
    Main,
    Footer
  }
}
</script>

<style>
.App{
  width: 600px;
  height: 700px;
  background: white;
  margin:0 auto ;
}

</style>

HmBut

<template>
  <button class="btn">通用按钮</button>
</template>

<script>
export default {

}
</script>

<style>
.btn {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  background-color: green;
  border-radius:5px;
}
</style>

注意：在这卡了很久，页面一直不显示各个组件的文字，能看到div框，但是看不到显示的文字内容，而且HmBut组件引入也不显示。

原因就是，css属性编写错误，line-height的值写了100没写单位，然后会默认为行高是100*font-size的30,所以现实行高就是3000px,行高极大，导致文字间距过大，在某些情况下看起来像是没有文字显示。

终于