nuxt使用图片懒加载vue-lazyload

对于nuxt使用第三方插件的方式大体都是都是一致的，就是在plugins文件夹中新增插件对应的js文件进行配置与操作，然后在nuxt.config.js文件的plugins配置项中引入新建的js文件就可以运用了。但是值得注意的是，在plugins中的配置项中，ssr最好选择false，因为基本上所有的前端第三方插件都是运行在浏览器而不是服务端。

下面就以图片懒加载vue-lazyload插件来作为例子展示：

首先在plugins文件夹下面新建一个vue-lazyload.js文件，文件内容是：

import Vue from "vue";
import VueLazyload from "vue-lazyload";

Vue.use(VueLazyload, {
  preLoad: 1.33, //预加载的宽高比例
  error: "图片路径", //图片加载失败展示的图片
  loading: "图片路径", //图片加载中展示的图片
  attempt: 2, //尝试加载的次数
  throttleWait: 500 //间隔多少时间重新加载
});

然后在nuxt.config.js文件的plugins配置项中引入文件，如下：

plugins: [
    ...其他配置文件,
    { src: "@/plugins/vue-lazyload", ssr: false }
],

到这里为止就已经完成了vue-lazyload在nuxt项目中的引用了，最后就是vue-lazyload在页面中的引用。

具体引用就是把vue文件中img的:src更改为v-lazy即可：

<img v-lazy="baseUrl+item.pictor" :alt="" :title="" class="" />。

 

到这里在nuxt项目中引入vue-lazyload插件就完成了，具体来说其它前端第三方插件的调用方式也差不多也都是这个流程。