vue-cli3通过vant实现背景图片懒加载

一、引入vant

npm i vant -S

或

yarn add vant

二、自动按需引入组件

npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

三、vant.js中

import Vue from 'vue';
import { Lazyload } from 'vant';

Vue.use(Lazyload);

四、main.js中

import './plugins/vant.js';

五、将下载好的图片导入项目

六、Login.vue页面中

<template>
    <div id="app">
        <div id='login' v-for="img in imageList" :key="img" v-lazy:background-image="img">
            <!-- login -->
        </div>
    </div>
</template>

<script>
import Login from './assets/login.jpg';
export default {
    name:'login',
    data(){
        return{
            imageList:[
                Login,
            ],
        }
    }
}
</script>

<style>
#login{
    height: 721px;
    background-size: 1600px 721px;
}
</style>