由于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"