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>