vue写共通头部底部外壳组件

components内添加共通组件

components内添加共通组件Footer.vue和Header.vue，这边举一个例子，将就看一下

Footer.vue

    <div class="footer-container">
         <span>我是底部</span>
    </div>
</template>

<script>
  export default {
    name: 'Footer'
  }
</script>

<style scoped lang="scss">
    .footer-container{
        height: 150px;
        width: 100%;
        min-width: 1320px;
        background: white;
        text-align: center;
    }
</style>

Header.vue

<template>
    <div class="header-container">
        <div class="header-container-main flex-h">
            <div class="header-container-main-l flex-h">
                <div class="header-container-main-logo"></div>
                <template v-for="item in menu">
                    <div
                            class="header-container-main-item"
                            :class="active == item.code ? 'active' : 'noActive'"
                            @click="onMenuClick(item.code)"
                    >
                        {{ item.name }}
                    </div>
                </template>
            </div>
            <div class="header-container-main-r flex-h">
                <div class="header-container-main-search"></div>
                <div class="header-container-main-login">登录</div>
                <div class="header-container-main-register">注册</div>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'Header',
    data() {
      return {
        active: 0,
        menu: [
          {
            name: '菜单一',
            code: 1
          },
          {
            name: '菜单二',
            code: 2
          },
          {
            name: '菜单三',
            code: 3
          }
        ]
      }
    },
    methods: {
      onMenuClick(code) {
        this.active = code
      }
    }
  }
</script>

<style scoped lang="scss">
    .header-container {
        height: 81px;
        width: 100%;
        min-width: 1320px;
        background: white;
        &-main {
            max-width: 1220px;
            margin: 0 auto;
            justify-content: space-between;
            &-l {
            }
            &-logo {
                width: 56px;
                height: 60px;
                background: rgb(0, 121, 254);
                margin: 10px 43px 10px 0;
            }
            &-item {
                border-top: 5px solid #ffffff;
                width: 110px;
                height: 75px;
                font-size: 14px;
                letter-spacing: normal;
                text-align: center;
                line-height: 75px;
                color: #999999;
                &.noActive:hover{
                    border-top: 5px solid rgb(0, 121, 254);
                    color: #999999;
                }
                &.active{
                    border-top: 5px solid #ffffff;
                    color: rgb(0, 121, 254);
                }
            }
            &-r {
            }
            &-search{
                width: 40px;
                height: 80px;
                margin: auto 15px ;
            }
            &-login{
                width: 70px;
                height: 80px;
                line-height: 80px;
                text-align: center;
                font-size: 14px;
            }
            &-register{
                width: 70px;
                height: 80px;
                line-height: 80px;
                text-align: center;
                font-size: 14px;
            }
        }
    }
</style>

合并在同一个页面内AppContainer.vue

本页面主要是把头部和尾部合并在一个页面内，内容以插槽 加入，不懂的可以去看vue插槽部分，这里不做具体阐述。

<template>
    <section class="app-container">
        <Header/>
        <section class="app-container-content">
            <!--内容插槽-->
            <slot></slot>
        </section>
        <Footer/>
    </section>
</template>

<script>
  //  <!--组件引用-->
  import Header from '@/components/common/Header'
  import Footer from '@/components/common/Footer'
  export default {
    name: 'app-container',
    components:{
      Header,Footer
    },
    beforeMount() {
      window.addEventListener('resize', this.resizeheightHandler)//响应式
    },
    mounted() {
      this.resizeheightHandler()
    },
    methods: {
      resizeheightHandler() {
        let htmlHight = document.documentElement.clientHeight || document.body.clientHeight;
        document.querySelector('.app-container-content').style.minHeight = (htmlHight-230) + 'px'//给内容撑开，让页面更加规整
      }
    }
  }
</script>

<style scoped lang="scss">
    .app-container{
        width: 100%;
        height: 100%;
        &-content{
            overflow-y: auto;
            overflow-x: hidden;
        }
    }
</style>

应用

主要引用页面（Main.vue）

<template>
    <app-container>
        <div class="app-main">
            <div>
                主要内容
            </div>
            <div>
                乱七八糟
            </div>
        </div>

    </app-container>
</template>

<script>
  import AppContainer from '@/components/common/AppContainer'

  export default {
    name: 'Main',
    components: {
      AppContainer
    }
  }
</script>

<style scoped>
    .app-main {
        text-align: center;
    }
</style>

最终效果

这样头部和尾部就固定了