基于vue-lazyload图片懒加载

     由于vue入门还没有多久，作为前端菜鸟为了做懒加载着实让我头疼了一番。最后搞了一天才将问题都搞定，特此将代码贴出来，也为与我一样同为菜鸟的朋友做个参考。

   第一步：首先在npm上下载vue-lazyload包

    npm install vue-lazyload --save

   第二步：配置webpack.base.conf.js

   在webpack.base.conf.js的最上面写上：const vueLoaderConfig = require('./vue-loader.conf')

   第三步：引用--全局引用

    因为我的项目用全局引用比较合适，所以就先只介绍全局引用，感兴趣的同学可以去https://www.npmjs.com/package/vue-lazyload这里看看。

            import  Vue from 'vue';

            import VueLazyLoad from 'vue-lazyload';

           Vue.use(VueLazyLoad, {loading: require('这里可以是你本地的图片，可以说联网的图片。这里由于我自己在用的时候，曾经不知道这是干嘛用的，所以被坑过，特此提醒下。')});

    现在开始贴代码:

<template>
  <div id="lazyload">
    <div class="tulazy">
        <img v-for="item in imageList" v-lazy="item" v-bind:key="item.id"  style="width: 100%">
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        imageList: [
          'http://pic.baike.soso.com/p/20140716/20140716174429-1194782149.jpg',
          'http://imgsrc.baidu.com/forum/w=580/sign=8f120a06f503918fd7d13dc2613c264b/e92cd688d43f879448f715c8d01b0ef41ad53ab1.jpg',
          'http://pic.baike.soso.com/p/20140716/20140716174429-1194782149.jpg',
          'http://imgsrc.baidu.com/forum/w=580/sign=8f120a06f503918fd7d13dc2613c264b/e92cd688d43f879448f715c8d01b0ef41ad53ab1.jpg',
          'http://pic.baike.soso.com/p/20140716/20140716174429-1194782149.jpg',
          'http://imgsrc.baidu.com/forum/w=580/sign=8f120a06f503918fd7d13dc2613c264b/e92cd688d43f879448f715c8d01b0ef41ad53ab1.jpg',
          'http://pic.baike.soso.com/p/20140716/20140716174429-1194782149.jpg',
          'http://imgsrc.baidu.com/forum/w=580/sign=8f120a06f503918fd7d13dc2613c264b/e92cd688d43f879448f715c8d01b0ef41ad53ab1.jpg',
          'http://covteam.u.qiniudn.com/test16.jpg?imageView2/2/format/webp',
          'http://covteam.u.qiniudn.com/test14.jpg?imageView2/2/format/webp',
          'http://covteam.u.qiniudn.com/test15.jpg?imageView2/2/format/webp',
          'http://covteam.u.qiniudn.com/test16.jpg?imageView2/2/format/webp'
        ]
      };
    }
  };
</script>
<style>
</style>

          如果有什么疑问，可以随时提问。