浅谈vue-lazyload实现的详细过程
发布时间:2020-12-17 02:49:43 所属栏目:百科 来源:网络整理
导读:本文介绍了浅谈vue-lazyload实现的详细过程,分享给大家,也给自己留个笔记 首先,在命令行输入 npm install vue-lazyload cnpm install vue-lazyload 然后,在main.js里引入这个模块。 然后在app.vue的template里写一个 然后在app.vue的script里写 捋一下思路
本文介绍了浅谈vue-lazyload实现的详细过程,分享给大家,也给自己留个笔记 首先,在命令行输入 然后,在main.js里引入这个模块。 然后在app.vue的template里写一个 然后在app.vue的script里写 捋一下思路: // The Vue build version to load with the
import command// (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import $ from 'jquery' import 'assets/bootstrap/css/bootstrap.min.css' import 'assets/bootstrap/js/bootstrap.min' import router from '@/router/index' import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload,{ preload:1.3,loading:require('../static/imgs/ad3.png'),//解释一下为什么是require('.....url'):因为vue自带webpack打包工具,如果是图片路径就会把他当成模块解析,所以直接引入就好了。 //记得把里面的路径换成自己的哦 listenEvents:['mousewheel'],}) //载入vue-router //import Vue from 'vue' / eslint-disable no-new / new Vue({ el: '#app',router,template: '',components: { App } }) //app.vue 这只是一个简单的vue-lazyload的实现,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |