【Vue项目】二、去哪儿网APP—

首页开发中的重难点

重点思想：页面组件化
页面组件化下的组件引入及使用
flex:1
使用iconfont图标
使用vue-awesome-swiper实现轮播效果
实现带有分页器的轮播
实现有分页效果的图标（icon）轮播区域
用padding-bottom实现固定宽高比
实现文本太多，显示省略号（…）效果：
保证内容不超出父盒子
使用vue axios来获取数据
解决轮播图在使用axios获取数据后，出现刷新后首先播放最后一张图的问题
代码优化

重点思想：页面组件化

第一次接触一个完整的Vue项目，从看视频一步一步的做，个人觉得最重要的思想就是，懂得页面组件化这个概念。
将一个页面分成各个部分，例如首页，将它分成头部、轮播图、图标区域、热销推荐区域以及周末去哪儿区域，每个区域都是由一个组件来开发实现。这样实现了页面中每个部分的开发实现自由，以及提高后续对某个部分修改维护的效率。
在一个组件中，分别由三个部分组成，分别是模板template（页面展示代码），数据script（业务实现代码），样式style（页面布局代码）。
本次开发中，使用了stylus这个CSS预处理器。因此最终整个组件的初始化如下：

<template></template><script>
export default {}
</script><style lang="stylus" scoped></style>

其中，style中的scoped关键字代表该样式只对当前组件有效，实现局部化样式。

页面组件化下的组件引入及使用

因为一个页面是由多个组件来构成的，则主页面需要引入局部组件，并且使用局部组件。

首先，引入组件：

import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'
import HomeWeekend from './components/Weekend'

然后在components部分定义局部组件：

components: {HomeHeader,HomeSwiper,HomeIcons,HomeRecommend,HomeWeekend}

接着，在data部分中，返回通过axios获取到的页面数据：

data () {return {lastCity: '',swiperList: [],iconList: [],recommendList: [],weekendList: []}},

然后在模板块中使用局部组件，并通过父子组件传值，将通过axios获取到的页面数据传给局部组件：

<template><div><home-header></home-header><home-swiper :list="swiperList"></home-swiper><home-icons :list="iconList"></home-icons><home-recommend :list="recommendList"></home-recommend><home-weekend :list="weekendList"></home-weekend></div>
</template>

注意：所有局部组件包裹在一个<div>组件中
4. 局部组件中，通过props接收父组件传递的数据，并定义数据类型为Array：

props: {list: Array},

flex:1

在header-input区域中（中间输入框区域），采用flex布局。在左右区域设置width的情况下，设置flex:1，实现中间区域在剩下的区域间均匀分配空间（自由拓展）。

使用iconfont图标

首先，在iconfont官网选择好要使用的图标，将之加入购物车并下载。
接着，将下载后的尾缀.svg .ttf .woff .eot的字体文件放入styles中的iconfont文件夹中，并将iconfont.css文件放入styles文件夹中，还要改变iconfont.css中文件加载路径。
最后，在mian.js中引入iconfont.css文件：

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

使用vue-awesome-swiper实现轮播效果

首页开发中，轮播图区域、图标区域皆使用了swiper实现了轮播效果。

首先根据GitHub上vue-awesome-swiper，安装并引入使用swiper。
更多详细使用则是参考这个网站：vue轮播（完整详细版），在这个网站上可以参考实现轮播图自动切换的效果
在swiper中绑定了:options=“swiperOption”，所以我们也要在data中添加swiperOption对象

data () {return {swiperOption: {pagination: '.swiper-pagination',loop: true,// 自动切换效果autoplay: true,speed: 1500}}
}

实现带有分页器的轮播

首先，需要在data中定义以下代码：

data () {return {swiperOption: {//定义了轮播页码pagination: '.swiper-pagination'}}}

如果想要修改页码的颜色，则需要采用样式穿透（>>>）：

.icons >>> .swiper-pagination-bullet-activebackground: $bgColor !important

如果实现轮播的自动播放以及循环播放，则可定义如下代码：

swiperOption: {pagination: '.swiper-pagination',//循环播放loop: true,// 自动切换效果autoplay: true,speed: 3000}

实现有分页效果的图标（icon）轮播区域

使用计算属性实现分页功能：list为icon的数据。一页只能有8个图标，**遍历list,当多余8个时，就要放到第二页去，即放到下一个轮播图中。**例如第九个icon,page=Math.floor(9 / 8)=1;说明第九个icon在第1页(页码从0开始算)，这样就生成了带有分页效果的icon轮播区域

 computed: {pages () {const pages = []this.list.forEach((item, index) => {const page = Math.floor(index / 8)if (!pages[page]) {pages[page] = []}pages[page].push(item)})return pages}}

之后在swiper-slide中用v-for先遍历pages，生成多个swiper-slide，每个swiper-slide对应一页。在每个swiper-slide中遍历pages中的每个item,生成每页的icon，简单来说就是两个for循环的嵌套。

 <swiper :options="swiperOption"><swiper-slide v-for="(page,index) of pages" :key="index"><div class="icon" v-for="item of page" :key="item.id"><div class="icon-img"><img class="icon-img-content" :src="item.imgUrl" /></div><p class="icon-desc">{{item.desc}}</p></div></swiper-slide><div class="swiper-pagination"  slot="pagination"></div></swiper>

用padding-bottom实现固定宽高比

将height设置为0，padding-bottom会以宽度为标准撑出高度:
如以下代码：

height :0
padding-bottom :53%

这个方法也可以解决图片的抖动问题。

实现文本太多，显示省略号（…）效果：

overflow :hidden
white-space :nowrap
text-overflow :ellipsis

此处css代码会经常用到，可建立一个style文件，将其存为函数方便复用。

保证内容不超出父盒子

在一个flex布局中，设置flex:1,min-width: 0，保证内容不超出外层容器
如果没有设置min-width，当内容大于剩余盒子宽度时会超出父盒子，设置min-width保证内容局限在父盒子内。

使用vue axios来获取数据

axios是通过promise实现对ajax技术的一种封装

首先使用命令$ npm install axios --save安装以及在文件中引入。
使用以下代码实现使用axios来获取数据

methods: {getHomeInfo () {axios.get('/api/index.json').then(this.getHomeInfoSucc)},getHomeInfoSucc (res) {res = res.dataif (res.ret && res.data) {const data = res.datathis.city = data.citythis.swiperList = data.swiperListthis.iconList = data.iconListthis.recommendList = data.recommendListthis.weekendList = data.weekendList}}},mounted () {this.getHomeInfo()}

利用mounted（）函数，当页面挂载成功后，调用getHomeInfo()函数，获取数据。
3. 在项目中，static文件夹是可以直接被外部访问到的，因此可以用来存放数据index.json。并且可以在.gitignore文件中设置static文件夹不上传至线上平台。
4. 如果我们的代码要上线，那我们的地址就要写成/api/index.json类似格式。此时，可以借助webpack-dev-server给我们提供了一个在config文件夹下的index.js中的proxyTable这个代理功能来解决这个问题。

    proxyTable: {'/api': {target: 'http://localhost:8080',pathRewrite:{'^/api': '/static/mock'}}}

解决轮播图在使用axios获取数据后，出现刷新后首先播放最后一张图的问题

在swiper中，使用v-if="list.length"判断list数组是否已经获取了ajax数据，如果数组为空时，swiper不会被创建。
不过为了减少在模板中出现逻辑性代码，采用计算属性来解决这个问题：

computed: {showSwiper () {return this.list.length}}

v-if则改为：v-if="showSwiper"

代码优化

header中的背景色经常会被使用到，所以可以优化一下代码，在styles文件夹下创建一个varibles.styl文件，编写以下代码：

$bgColor = #00bcd4

为了简化引入路径，可以在build文件夹下的webpack.base.conf.js中编写以下代码：

'styles': resolve('src/assets/styles')

保存后，可以在引入varibles.styl时，使用该简化后的路径：

@import'~styles/varibles.styl'

注意：在css中引入样式时需要在import前加@；
在css中引入时需要在前面加~