（二）Vue项目——轻社区：完成前端页面布局

目录

前端页面布局

1.页面结构

2.配置路由

3.完善头部和尾部

4.顶部导航栏

5.安装font-awesome

---

前端页面布局

1.页面结构

页面的头部和尾部是公共部分，将头部和尾部做成两个组件。

创建src\components\Header.vue。

<template>

  <div>

    头部区域

  </div>

</template>

创建src\components\Footer.vue。

<template>

  <div>

    尾部区域

  </div>

</template>

打开src\App.vue，删掉原有代码，添加如下代码。

<template>

  <div id="app">

    <Header />

    <div class="container">

      内容区域

    </div>

    <Footer />

  </div>

</template>

<script>

import Header from '@/components/Header'

import Footer from '@/components/Footer'

export default {

  name: 'App',

  components: { Header, Footer }

}

</script>

最后删除这两个用不到的文件。

src\components\HelloWorld.vue

src\assets\logo.png

页面结果：

2.配置路由

停止项目，安装vue-router路由。

npm install vue-router@3.1 --save

安装完成后，启动项目。

创建路由文件src\router\index.js。

import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router)

var router = new Router({

  routes: [

    { path: '/', name: 'home', component: resolve => require(['@/pages/Home.vue'], resolve), meta: { title: '首页' } },

    { path: '/register', name: 'register', component: resolve => require(['@/pages/Register.vue'], resolve), meta: { title: '用户注册' } },

  ],

  linkActiveClass: 'active',

  mode: 'history'

})

router.beforeEach((to, from, next) => {

  if (to.meta.title) {

    document.title = to.meta.title + ' - 轻社区'

  }

  next()

})

export default router

将对应的两个页面组件创建出来。

创建src\pages\Home.vue。

<template>

  <div>

    这是首页，去<router-link :to="{ name: 'register' }">注册</router-link>

  </div>

</template>

创建src\pages\Register.vue。

<template>

  <div>

    这是注册页，返回<router-link :to="{ name: 'home' }">首页</router-link>

  </div>

</template>

在src\main.js中导入。

import Vue from 'vue'

import App from './App.vue'

import router from './router'

……（原有代码）

new Vue({

  render: h => h(App),

  router

}).$mount('#app')

修改src\App.vue，在内容区域显示路由视图。

<div class="container">

  <router-view />

</div>

页面效果：

3.完善头部和尾部

重新编写src\components\Header.vue。

<template>

  <div>

    <nav class="navbar navbar-expand-sm navbar-light bg-light">

      <div class="navbar-brand header-logo">

        <h4>

          <router-link :to="{ name: 'home' }">LightBBS</router-link>

        </h4>

      </div>

    </nav>

  </div>

</template>

<style lang="scss" scoped>

.header-logo {

  a {

    color: #007bff;

  }

}

</style>

重新编写src\components\Footer.vue。

<template>

  <div class="footer">@此网站仅用于学习使用</div>

</template>

<style scoped>

.footer {

  text-align: center;

  font-size: 12px;

  height: 80px;

  line-height: 80px;

}

</style>

再设置一下src\App.vue的样式。

<style>

#app {

  font-family: 'Microsoft YaHei', 'Microsoft Sans Serif', 'Avenir', Helvetica, Arial, sans-serif;

}

.container {

  margin-top: 20px;

}

</style>

查看结果：

4.顶部导航栏

修改src\components\Header.vue。

<div class="navbar-brand header-logo">

  ……（原有代码）

</div>

<button class="navbar-toggler" data-toggle="collapse" data-target="#collapsibleNavbar">

  <span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">

  <div>

    <input class="form-control" type="text" placeholder="Search" />

  </div>

  <ul class="navbar-nav header-nav">

    <li class="nav-item">

      <router-link class="nav-link" :to="{ name: 'login' }">

        登录

      </router-link>

    </li>

    <li class="nav-item">

      <router-link class="nav-link" :to="{ name: 'register' }">

        注册

      </router-link>

    </li>

  </ul>

</div>

样式：

.header-logo {

  margin-top: 5px;

  margin-right: 20px;

  ……（原有代码）

}

.header-nav {

  a {

    color: #777;

  }

}

把登录页面创建出来。

创建src\pages\Login.vue。

<template>

  <div>

    登录页面

  </div>

</template>

在路由中添加登录页面。

打开src\router\index.js，添加路由。

routes: [

  ……（原有代码）

  { path: '/login', name: 'login', component: resolve => require(['@/pages/Login.vue'], resolve), meta: { title: '用户登录' } },

],

页面结果：

5.安装font-awesome

为了更好的页面效果，给“登录”和“注册”链接添加图标。

npm install font-awesome@4.7 --save

在src\main.js中引入。

import 'font-awesome/css/font-awesome.min.css'

修改“登录”和“注册”链接，在文本前面加上图标。

打开src\components\Header.vue。

登录链接：

<i class="fa fa-sign-in"></i>登录

注册链接：

<i class="fa fa-user-plus"></i>注册

给图标加点右边距：

.header-nav {

  ……（原有代码）

  .fa-sign-in {

    margin-left: 2px;

    margin-right: 11px;

  }

  .fa-user-plus {

    margin-right: 8px;

  }

}

页面效果：

下期见，关注我，嘿嘿~~