在做项目时，我们的页面风格往往都是统一的，页面布局大多也相似，这样我们就可以吧相同的，可以复用的组件封装起来，页面上需要使用时，引用就可以了；下面介绍一个自己封装的页面布局组件

1.在components下新建PageFrame/index.vue,内容如下：

<template>
  <div class="page-frame">
    <div class="page-header">
      <slot name="header"></slot>
    </div>
    <div class="page-body">
      <slot></slot>
    </div>
    <div class="page-footer">
      <slot name="footer"></slot>
    </div>
    <div class="float-action">
      <slot name="float-action"></slot>
    </div>
  </div>
</template>

<script>

export default {
  name: 'page-frame'
}
</script>

<style lang="less">
  .page-frame{
    height: 100%;
    position: relative;
    overflow: hidden;
    .float-action{
      position: absolute;
      bottom: 10px;
      right: 10px;
    }
  }
  .page-header{
    // height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100
  }
  .page-body{
    margin-top: 46px;
    padding-bottom: 140px;
    height: calc(100vh - 46px);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
  }
</style>

2.将组件挂在Vue对象上

在components下新建index.js,内容如下

import PageFrame from './PageFrame'
const install = (Vue) => {
  Vue.component('GoPageFrame', PageFrame)
}
export default install

3.在页面内直接引用