vue项目实战（二）之首页layout布局

一、替换显示页面

1.在 src/components目录下新建Layout.vue文件：

<template>
    <div>
        <h2>header</h2>
        <h2>content</h2>
        <h2>footer</h2>
    </div>
</template>

先填充简单的显示内容

2.修改main.js文件

将main.js文件修改如下：

import Vue from 'vue'
import router from './router'
import Layout from './components/Layout'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { Layout },
  template: '<Layout/>'
})

引入Layout组件，将App替换成我们的布局组件Layout

3.启动项目

输入命令

npm run dev

启动成功后访问http://localhost:8081，发现页面内容已经替换成我们的了

二、填充头部和底部内容

1.制作头部标题栏

在Layout.vue中将

<h2>header</h2>

标签替换为以下内容：

    <div class="yv-header">
        <div class="yv-header-content">
            <img id="header-img" src="../assets/logo.png" >
            <div class="header-important">
                <div class="header-title"><font id="header-title-font">育π网</font></div>
                <div  class="header-title-foo"><font id="header-title-font-foo">www.yvpai.com</font></div>
            </div>

            <div class="header-tabs">
                <div @mouseover="activeTab(index)" @mouseout="moveActive"  @click="changeTab(index)" class="header-tab"  :class="[index === nowIndex ? 'tab-active':'',index === activeIndex ? 'tab-active':'']" 
                 v-for="(item,index) in tabList">{{ item }}</div>
            </div>

            <div class="header-login-regist">
                <div class="header-login">登录</div>
                <div class="header-splid">|</div>
                <div class="header-login">注册</div>
            </div>

        </div>
    </div>

预览后效果如下：

2.制作底部

在Layout.vue中将

<h2>footer</h2>

替换为：

<div class="yv-footer">
        <div class="yv-footer-content">
            <div class="footer-record ">
                互联网ICP备案：皖ICP备18007469号
            </div>
            <div class="footer-company">
                ©www.dreamland.wang 梦境网版权所有
            </div>

        </div>
    </div>

预览后效果如下：

3.中间主要内容

中间可变化的内容通过路由来实现，如下：

 <div class="container">
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</div>

打开src/router/index.js文件，发现路由如下：

Vue.use(Router)

export default new Router({
routes: [
{
  path: '/',
  name: 'HelloWorld',
  component: HelloWorld
}
]
})

以上路由规则是指，当访问"/"时，中间内容引入HelloWorld组件，而头和底部不变，这样就达到了改变中间内容的效果，如下图：

访问我的达人课

访问我的博客 Wang's Blog

关注我的微信公众号获取更多资源