第9章 Vue项目开发之首页

首页制作完的整体效果：

效果图

如果你想看首页整体开发效果，直接运行master分支即可：
https://github.com/fx35792/vue-travel

如果想看每部分的开发效果：

• 首页header和swiper我放到一个分支上了都在swiper分支：
  https://github.com/fx35792/vue-travel/tree/swiper
• 首页iconList开发
  https://github.com/fx35792/vue-travel/tree/index-icons
• 首页”热门推荐“和”周末去哪“开发
  https://github.com/fx35792/vue-travel/tree/index-recommond

9-1 Vue项目开发首页之header

在开发这块的时候，主要是一个布局的设置，还有就是icon图标，这个icon图标用的是阿里iconfont:https://www.iconfont.cn/
1.创建一个iconfont账号
2.登录后-->图标管理-->我的图标-->新建项目
3.去查找UI所需要的图标icon，添加购物车-->添加项目-->选择自己新建的项目
4.图标全部查找完以后可以把这个项目下载到本地
第一种方法：如果是下载到本地，放入到项目中的操作

程序引入字体样式文件
在main.js引入

import 'styles/iconfont.css'

//页面上使用的话
<span class="iconfont search-icon">&#xe609;</span>

第二种方法：不下载本地，用阿里iconfont的cdn

程序引入样式cdn

在index.html中添加

<link rel="stylesheet" href="//at.alicdn.com/t/font_892705_hf5c19omqen.css">‘’

//页面上使用的话（和方法一是一样的）
<span class="iconfont search-icon">&#xe609;</span>

如果你是线上项目，为了保险起见，推荐使用方法一
但是如果你平时自己做项目练习，你使用方法二就行

9-1 Vue项目开发首页之Swiper轮播图

1.安装https://github.com/surmon-china/vue-awesome-swiper

npm install vue-awesome-swiper --save

2.如何使用呢？
因为项目中很多地方可能需要用到swiper，所以我们打算把他放到main.js中

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

3.具体代码调用

//template
<swiper :options="swiperOption" v-if="swiperShow">
      <swiper-slide v-for="item of list" :key="item.id">
        <img :src="item.imgUrl" alt class="swiper-img">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
</swiper>

//js
<script>
export default {
  name: 'HomeIcons',
  data () {
    return {
      swiperOption: {
        pagination: 'swiper-pagination',//是否显示轮播图下面的小圆点
        autoPlay: false//是否循环自动播放
      }
    }
  },
  computed: {
    swiperShow: function () {
      return this.list.length//当有数据的时候，再去渲染swiper，不然显示的第一条数据是最后一条
    }
  }
}
</script>