Vue项目二：设置标题搜索栏，以及图片的轮播。

7-1穿件头目录
  采用了stylus的方法编写CSS样式。
  <template>
<div>
  <div class="header">
    <div class="header-left">返回</div>
    <div class="header-input">输入城市/景点/游玩主题</div>
    <div class="header-right">城市</div>
  </div>
</div>
</template>
<script>
export default {
  name: 'HomeHeader'
}
</script>

<style lang="stylus" scoped>
  .header
    display: flex
    line-height: .86rem
    background: #00bcd4
    color:#fff
    .header-left
      width: .64rem
      float: left
    .header-input
      flex:1
      height: .64rem
      margin-top: .12rem
      line-height: .64rem
      margin-left: .2rem
      background: #fff
      border-radius: .1rem
      color: #ccc
    .header-right
      width: 1.24rem
      float: right
      text-align:center
</style>
2.简化代码：webpack.base.conf.js中添加
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'styles': resolve('src/assets/styles'),
    }
  },

   styles来使用：
  如：@import '~styles/varibles.styl'

7-2引入阿里iconfont

  添加的文件 iconfont目录中的，和iconfont.css。

iconfont.css需要添加文件所在目录

@font-face {font-family: "iconfont";
  src: url('./iconfont/iconfont.eot?t=1535510692186'); /* IE9*/
  src: url('./iconfont/iconfont.eot?t=1535510692186#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAToAAsAAAAAB2AAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8mkg/Y21hcAAAAYAAAABfAAABnLPgHAlnbHlmAAAB4AAAAQEAAAEg5x7cYWhlYWQAAALkAAAALwAAADYSd5dIaGhlYQAAAxQAAAAcAAAAJAfeA4VobXR4AAADMAAAAA4AAAAQEAAAAGxvY2EAAANAAAAACgAAAAoAuABQbWF4cAAAA0wAAAAfAAAAIAERADBuYW1lAAADbAAAAUUAAAJtPlT+fXBvc3QAAAS0AAAAMgAAAEObMMDReJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeqTzzYm7438AQw9zM0AAUZgTJAQDluAxUeJztkLENgDAMBM9JQBFiDEqqCDFExqBi8qwRHJuCIXjrLPtluXhgAqKyKwnkRhi61BXzI4v5iVP3rBWgba202vt3MoldZJ2Cf5CZX6v1493iSM2xLItjfnWQB/zLE6oAeJw1jsFKw0AQhuffpMmmkdgm7W4CNkHERC8FS0mKSIkiePRpxKvgWWhOevERmrM9qATBq3cvXvsInla3gQ7MxwwzfPzESJdRsxX5FBAF+xMhLRsesjRDmhe5PHlkX8kR4KvnYBY5HfXU5+FAsJfjeBSoNOS+xfETzYJdaJXuvzv2a9xrHzmwBhJikk+1a1ogH4N9qksZ4o2LHlcX3MaryxPjVp1FZaSueH/IseLCwYeb2G007Xs3boySXJJ0QHQ4RjZHEUN67aBXD3aMTjqHSCA86ODfy7Vprpf1hnXVmGZTLTbEQ9cYjvh5yx192/6V249F1Zy6ez10r1v+A0PHPhkAAAB4nGNgZGBgAGLH093G8fw2Xxm4WRhA4PoazSUI+n8DCwNzM5DLwcAEEgUAI28KLgB4nGNgZGBgbvjfwBDDwgACQJKRARWwAABHCgJteJxjYWBgYEHCAACwABEAAAAAAAAAKABQAJAAAHicY2BkYGBgYVBhYGYAASYg5gJCBob/YD4DAAx/AUIAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAhZGJkZmRhZGVgT0rMzGvJL+ULS0xL6M0k604v7S4NJ+BAQBvuwhZAAA=') format('woff'),
  url('./iconfont/iconfont.ttf?t=1535510692186') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('./iconfont/iconfont.svg?t=1535510692186#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

7-3轮播图片
  1.npm install vue-awesome-swiper@2.6.7 --save 插件的安装。
  2.宽高比例自适应
    overflow:hidden
    width:100%
    height: 0
    padding-bottom: 31.25%
  3.设置分支index-swiper上传：
    git pull
    git checkout index-swiper
    git status
    进入分支
    git add .
    git commit -m "change"
    git push
    在上传到master
    git checkout master
    git merge origin/index-swiper
    git push

    4.循环轮播，在插件的数据swiperOption中增加一个loop :true，就可以实现

轮播代码
<template>
<div class="wrapper">
  <swiper :options="swiperOption" >
    <swiper-slide v-for="item of swiperList" :key="item.id">
      <img class="img-swiper" :src="item.imgUrl" />
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
</div>
</template>

<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true
      },
      swiperList: [{
        id: '0001',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1808/8a/1957a0fb58ad0402.jpg_750x200_e72b8c0f.jpg'
      },
      {
        id: '002',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1804/bd/8e4a1c3f470d3702.jpg_750x200_f1f0a8c7.jpg'
      }]
    }
  }
}
</script>

<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
  background: #fff
.wrapper
  overflow:hidden
  width:100%
  height: 0
  padding-bottom: 26.67%
  background: #ccc
  .img-swiper
    width: 100%
</style>