使用Vue框架开发去哪儿旅游网移动端实战项目（六）

第六章 旅游网站首页开发

首页导航栏

根据设计稿完成页面的布局：

在正式编写代码之前，先来介绍一下stylus 这是一种与less、sass一样的功能，可以帮助我们快速完成css代码的编写。请使用一下命令进行安装：

npm install stylus --save
npm install stylus-loader --save

开始编写header页面：

<template>
  <div class="header">
    <div class="header-left">返回</div>
    <div class="header-input">输入城市景点/游玩/主题</div>
    <div class="header-right">城市</div>
  </div>
</template>

<script>
export default {
    
  name: 'HomeHeader'
}
</script>
<!-- 要使用stylus使用lang标识，只想对当前组件有效使用scoped -->
<style lang="stylus" scoped>
.header
  display: flex
  color: #fff
  background: #00bcd4
  line-height: .86rem
  .header-left
    width: .64rem
    float: left
  .header-input
    flex: 1
    background: #fff
    margin-top: .12rem
    height: .64rem
    line-height: .64rem
    margin-left: .2rem
    border-radius: .05rem
    color: #ccc
  .header-right
    width: 1.24rem
    float:right
    text-align: center
</style>

如果页面出现顶部有空白的情况，解决办法是在App.vue中的style中设置内边距和外边距的值为0，一般情况下不会有出现，除非你真是出现了。

<style>
  *{
    
    padding: 0;
    margin: 0;
  }
</style>

现在我们向把“返回”换成一个图标的形式，就会用到下一节要说的内容。

iconfont的使用和代码优化

首先我们进入iconfont官网，没有账号的先进行注册，注册好了记得新建一个项目(travel)。

如果你已经注册好，点击图标库>官方图标库>选择任意一个，找到我们的需要的图标并且添加到购物车之中>点击右边的购物车并点击添加至项目>然后下载到本地

这时我们会得到一个包，我们只需要用到其中几个文件就可以。我们把需要用到的文件拷贝到我们项目中。

我们可以看到图中，我把除了.css的的文件放在了style文件夹中，把其它类型的文件放在了新建的iconfont文件夹中。

这时我们在编辑器中打开iconfont.css文件，我们需要修改一下它所使用到的文件的路径

下面的这一部分可以注释掉或者删除。根据自己的理解来使用，这里我选择不使用这种方法，因为它写的都是中文的拼音。

接下来我们将iconfont.js引入到入口文件中。

import './assets/styles/iconfont.css'

完成以上的步骤，如果没有出错的话，我们就可以开始在页面中开始使用这些图标了。

在Header.vue文件中这样写：

<template>
  <div class="header">
    <div class="header-left"><span class="iconfont">&#xe696;</span></div>
    <div class="header-input"><span class="iconfont">&#xe64d;</span>输入城市景点/游玩/主题</div>
    <div class="header-right">城市<span class="iconfont">&#xe64a;</span></div>
  </div>
</template>

上面代码中的Unicode代码可以在iconfont官方你的项目文件中选择Unicode并复制代码，就可以得到了。这也就为什么我们前面要注释那些样式代码的原因了。

图标是有了，但是我们还需要做一些位置的优化：

<template>
  <div class="header">
		<div class="header-left"><div class="iconfont back-icon">&#xe696;</div></div>
		<div class="header-input"><span class="iconfont search-icon">&#xe64d;</span>输入城市景点/游玩/主题</div>
		<div class="header-right">城市<span class="iconfont arrow-icon">&#xe64a;</span></div>
  </div>
</template>

<style lang="stylus" scoped>
.header
	display: flex
	color: #fff
	background: #00bcd4
	line-height: .86rem
	.header-left
		width: .64rem
		float: left
		.back-icon
			text-align: center
			font-size: .4rem
	.header-input
		flex: 1
		background: #fff
		margin-top: .12rem
		height: .64rem
		line-height: .64rem
		margin-left: .02rem
		border-radius: .05rem
		padding-left: .2rem
		color: #ccc
    .search-icon
      padding-right: .1rem
	.header-right
		width: 1.24rem
		float:right
		text-align: center
		.arrow-icon
			font-size: .24rem
</style>

完成以上的内容我们就可以看到现在的效果：

代码的优化：

由于我们这个项目的主题颜色，是绿色。在以后的很多组件都会用到这个颜色。我们可以定义一个变量，需要的时候直接引用就可以了。

首先需要在src/assets/styles目录下新建一个varibles.styl这样的一个文件，表示是一个stylus格式的文件。并且在文件中写上一下内容。该文件可以用来写一些变量。

$bgColor = #00bcd4

下面就就要在Header.vue