添加vue3-lazyload组件

package.json

@@ -25,6 +25,7 @@
     "unplugin-vue-components": "^0.15.6",
     "vue": "^3.2.16",
     "vue-router": "^4.0.0-0",
+    "vue3-lazyload": "^0.2.2-beta",
     "vue3-styled-components": "^1.2.1",
     "vuex": "^4.0.0-0"
   },

src/main.js

@@ -2,5 +2,21 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
+import VueLazyLoad from 'vue3-lazyload'
 
-createApp(App).use(store).use(router).mount("#app");
+createApp(App)
+.use(store)
+.use(router)
+.use(VueLazyLoad, {
+  // options...
+  // loading: () => {
+  //   console.log('loading')
+  // },
+  // error: () => {
+  //   console.log('error')
+  // },
+  // loaded: () => {
+  //   console.log('loaded')
+  // }
+})
+.mount("#app");

src/views/discover/Recommend.vue

@@ -43,7 +43,7 @@
         >
           <div class="c2-list">
             <div class="play-btn">
-              <img :src="song.album.blurPicUrl" />
+              <img v-lazy="song.album.blurPicUrl" />
               <n-button
                 text
                 class="start-play-bg"
@@ -244,12 +244,12 @@ getBanner(0)
 
 //#region 最新音乐
 let topSongs = ref([]);
+topSongs.value = store.getters.cache('topSongs')
+// if(store.getters.cache('topSongs'))
+// {
 //   topSongs.value = store.getters.cache('topSongs')
-if(store.getters.cache('topSongs'))
-{
-  topSongs.value = store.getters.cache('topSongs')
-  console.log('载入Caches');
-}
+//   console.log('载入Caches');
+// }
 //最新音乐
 getTopSong()
   .then((res) => {
@@ -404,6 +404,7 @@ getPersonalizedMV()
 
   img {
     width: 60px;
+    height: 60px;
     border-radius: 4px;
   }
 

yarn.lock

@@ -10540,6 +10540,11 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue3-lazyload@^0.2.2-beta:
+  version "0.2.2-beta"
+  resolved "https://registry.yarnpkg.com/vue3-lazyload/-/vue3-lazyload-0.2.2-beta.tgz#c75df1a8553b60fbfd8324d083cb0e71c94dd26d"
+  integrity sha512-k198DjJmH8vmtPm90nzs/04MwMGpqmbhrp9foonWyPDCviQtCATYxlvloxRXroElcDRERZCs/+GRjeDVWsPtNw==
+
 vue3-styled-components@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/vue3-styled-components/-/vue3-styled-components-1.2.1.tgz#de338c77e8e8bb2139be5939c5813bbe7347bc50"