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插件就完成了，具體來說其它前端第三方插件的調用方式也差不多也都是這個流程。