Vue实现轮播图

算是复习，因为以前学过，用进废退，这里再重新捋一遍。

Vant的使用

轻量化的vue移动UI组件库Vant的相关使用
引入命令： npm i vant -s
局部配置，这样更加高效，避免整个加载，造成冗余，这里以使用Button为例子：
npm i babel-plugin-import -D -D是--save-dev的简写

Vue.use(Button)

在使用之前，还需要在配置.babelrc文件中配置：["import",{"libraryName":"vant","style":true}]这一句

    "transform-vue-jsx",
    "transform-runtime",
    ["import",{"libraryName":"vant","style":true}]
  ]

在布局中测试,效果这里就不写了，可以参考Vant的官网：

<template>
  <div class="hello">
   <van-button type="primary">危险按钮</van-button>
  </div>
</template>

WebApp的屏幕适配

rem font size of the root element 是相对长度单位，相对于跟元素（即html元素）font-size计算值的倍数

iPhone5 1rem==16px html默认的font-size==16px，不同的手机屏幕素质不同，需要动态获取屏幕的宽度，
动态设置根元素的字体大小，这里也就是html元素下字体的大小，从而控制rem的值。

<script type="text/javascript">
  let htmlWidth=document.documentElement.clientWidth||document.body.clientWidth;
  /*有些浏览器获取不到,所以添加 ||document.body.clientWidth */
  let htmlDom=document.getElementsByTagName('html')[0];
  htmlDom.style.fontSize=htmlWidth/20+'px';
  console.log(htmlWidth)
</script>

在css中设置:

  <style>
    .test {
      width: 20rem;
      height: 10rem;
      background-color: aqua;
      text-align: center;
    }
    .hello {
      color: #ff00ff;
      font-size: 1rem;
    }
  </style>

对于一些高清屏，需要调整这个缩放值，正常initial-scale=1.0,需要调小，但绝大多数情况是不用调整这个的
<meta name="viewport" content="width=device-width,initial-scale=1.0">

写一个轮播图

主要用到Vant的轮播组件Swipe,SwipeItem,还用到了Vue的双向绑定，以及v-for指令遍历图片数组内容
Vant引入：

import {Button, Row, Col, Swipe, SwipeItem} from 'vant'
Vue.use(Button).use(Row).use(Col).use(Swipe).use(SwipeItem)

定义数据：

<script>
export default {
  data () {
    return {
      msg: 'Shopping Mall',
      locationIcon: require('../../assets/images/location.png'),
      bannerPicArray: [
        {imageUrl: 'http://images.baixingliangfan.cn/advertesPicture/20180407/20180407175040_1780.jpg'},
        {imageUrl: 'http://images.baixingliangfan.cn/advertesPicture/20180407/20180407175111_9509.jpg'},
        {imageUrl: 'http://images.baixingliangfan.cn/advertesPicture/20180407/20180407175142_6947.jpg'}
      ]
    }
  }
}
</script>

布局内容：

 <div class="swipe-area">
      <van-swipe :autoplay="1000">
        <van-swipe-item v-for="(banner,index) in bannerPicArray" :key="index">
          <img :src="banner.imageUrl" width="100%"/>
        </van-swipe-item>
      </van-swipe>
    </div>

这里写完后，查看效果发现轮播图没有居中，因为Swipe自带了边界，需要在css中进行清除 .swipe-area{ clear: both; }
但这还没有完，如果出现图片过大，或者网络情况较慢的情况，我们需要避免用户等待过久，程序员就是这么贴心。Vant提供了懒加载 LazLoad，引入后我们只需更改前面写的这个 <img :src="banner.imageUrl" width="100%"/> 改成 <img v-lazy="banner.imageUrl" width="100%"/>就可以。模拟测试可以更改chrome浏览器的network状态为slow3G,模拟3G网络下的情况。

使用axios请求

npm install --save axios
使用的过程：

import axios from 'axios'
created () {
    axios({
      url: 'http://localhost:8099/api/get-info',
      method: 'get'
    })
      .then(function (response) {
        console.log(response)
      })
      .catch(function (error) {
        console.log(error)
      })
      // .then(response => {
      //   console.log(response)
      // })
      // .create(error => {
      //   console.log(error)
      // })
  }

过程很简单，接口是自己用SpringBoot随便读取了一个json文件，刚开始根据教程（来源：技术胖vue实战）中的是按照注释掉的方式简写的，但是调试发现会报错[Vue warn]: Error in created hook: "TypeError: handler.call is not a function",分析大概是在生命周期函数中不能使用=>这种方式缩写，改回原始方式，报错没了，突然想起以前学过调用生命周期钩子函数有些注意事项，见过这个报错的，要捡起来，写文章记下来。

后记

复习过程出现报错：
Unresolved function or method require()
解决办法：
file-->setting-->Languages&Frameworks-->JavaScript-->Libraries-->DownLoad 找到Requiries相关内容，download后问题解决。