lkddi/AlgerMusicPlayer
1
0
Fork 0
mirror of https://github.com/algerkong/AlgerMusicPlayer.git synced 2026-04-05 07:20:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

异步组件 优化首屏加载速度

Browse Source
This commit is contained in:
alger
2021-10-25 11:16:41 +08:00
parent e97f71dce4
commit 6771e44d76
3 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/api/music.ts
View File

@@ -1,7 +1,6 @@
import { IPlayMusicUrl } from "@/type/music";
import { ILyric } from "@/type/lyric";
import request from "@/utils/request";
// 根据音乐Id获取音乐播放URl
export const getMusicUrl = (id: number) => {
return request.get<IPlayMusicUrl>("/song/url", { params: { id: id } });

8
src/layout/AppLayout.vue
View File

@@ -30,7 +30,13 @@
import type { SongResult } from '@/type/music';
import { computed } from 'vue';
import { useStore } from 'vuex';
import { AppMenu, PlayBar, SearchBar } from './components';
// import { AppMenu, PlayBar, SearchBar } from './components';
import {defineAsyncComponent} from 'vue';
const AppMenu = defineAsyncComponent(() => import('./components/AppMenu.vue'));
const PlayBar = defineAsyncComponent(() => import('./components/PlayBar.vue'));
const SearchBar = defineAsyncComponent(() => import('./components/SearchBar.vue'));
const store = useStore();

13
src/views/home/index.vue
View File

@@ -14,10 +14,15 @@
</template>
<script lang="ts" setup>
import RecommendSinger from "@/components/RecommendSinger.vue";
import PlaylistType from "@/components/PlaylistType.vue";
import RecommendSonglist from "@/components/RecommendSonglist.vue";
import RecommendAlbum from "@/components/RecommendAlbum.vue";
import {defineAsyncComponent} from 'vue';
// import RecommendSinger from "@/components/RecommendSinger.vue";
// import PlaylistType from "@/components/PlaylistType.vue";
// import RecommendSonglist from "@/components/RecommendSonglist.vue";
// import RecommendAlbum from "@/components/RecommendAlbum.vue";
const RecommendSinger = defineAsyncComponent(() => import("@/components/RecommendSinger.vue"));
const PlaylistType = defineAsyncComponent(() => import("@/components/PlaylistType.vue"));
const RecommendSonglist = defineAsyncComponent(() => import("@/components/RecommendSonglist.vue"));
const RecommendAlbum = defineAsyncComponent(() => import("@/components/RecommendAlbum.vue"));
</script>