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

7-1穿件头目录
  采用了stylus的方法编写CSS样式。
 

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 [email protected] --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，就可以实现

轮播代码