用Vue3.0開發音樂Web app （視頻源碼齊）

用Vue3.0開發音樂Web app

Vue3.0高階實戰：開發高質量音樂Web app

第2章 的內容有以下這些：使用腳手架工具建立項目 、（視頻資源vx（cmL46679910））腳手架生成代碼介紹、項目基礎代碼編寫、Tab組件實現 。

import Scroll from '@/components/wrap-scroll'
  import { getTopList } from '@/service/top-list'
  import { TOP_KEY } from '@/assets/js/constant'
  import storage from 'good-storage'

  export default {
    name: 'top-list',
    components: {
      Scroll
    },
    data() {
      return {
        topList: [],
        loading: true,
        selectedTop: null
      }
    },
    async created() {
      const result = await getTopList()
      this.topList = result.topList
      this.loading = false
    },
    methods: {
      selectItem(top) {
        this.selectedTop = top
        this.cacheTop(top)
        this.$router.push({
          path: `/top-list/${top.id}`
        })
      },
      cacheTop(top) {
        storage.session.set(TOP_KEY, top)
      }
    }
  }
</script>

複製代碼

獲取輪播圖接口數據 、獲取輪播圖接口數據、

輪播圖組件的開發、 輪播圖組件的使用 、（視頻資源vx（cmL46679910））歌單列表實現&滾動組件的封裝 、圖片懶加載的實現 、v-loading 自定義指令的開發、v-loading 自定義指令的優化 。

第3章 的內容有以下這些：歌手列表數據獲取、IndexList 組件基礎滾動功能實現、 歌手列表固定標題實現（上） 、歌手列表固定標題實現。

import { getSingerList } from '@/service/singer'
  import IndexList from '@/components/index-list/index-list'
  import storage from 'good-storage'
  import { SINGER_KEY } from '@/assets/js/constant'

  export default {
    name: 'singer',
    components: {
      IndexList
    },
    data() {
      return {
        singers: [],
        selectedSinger: null
      }
    },
    async created() {
      const result = await getSingerList()
      this.singers = result.singers
    },
    methods: {
      selectSinger(singer) {
        this.selectedSinger = singer
        this.cacheSinger(singer)
        this.$router（視頻資源vx（**cmL46679910**））.push({
          path: `/singer/${singer.mid}`
        })
      },
      cacheSinger(singer) {
        storage.session.set(SINGER_KEY, singer)
      }
    }
  }
</script>

複製代碼

歌手列表固定標題實現（中） 、歌手列表固定標題實現（下）

、歌手列表快速導航入口實現（01） 、 歌手列表快速導航入口實現（02）、歌手列表快速導航入口實現（03） 、 歌手列表快速導航入口實現（04）。

第4章 的內容有以下這些： 歌手詳情頁歌曲列表數據獲取 、歌手詳情頁批量獲取歌曲、歌手詳情頁 MusicList 組件基礎代碼編寫 、 歌手詳情頁 MusicList 組件功能交互優化（01）、 歌手詳情頁 MusicList 組件功能交互優化（02) 。

<div class="singer-detail">
    <music-list
      :songs="songs"
      :title="title"
      :pic="pic"
      :loading="loading"
    ></music-list>
  </div>
</template>

<script>
  import createDetailComponent from '@/assets/js/create-detail-component'
  import { getSingerDetail } from '@/service/singer'
  import { SINGER_KEY } from '@/assets/js/constant'

  export default createDetailComponent('singer-detail', SINGER_KEY, getSingerDetail)
</script>

<style lang="scss" scoped>
  .singer-detail {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: $color-background;
  }
</style>

複製代碼

歌手詳情頁 MusicList 組件功能交互優化（03) 、（視頻資源vx（cmL46679910））歌手詳情頁支持詳情頁刷新 、 歌手詳情頁路由過渡效果實現 、歌手詳情頁邊界狀況處理 、 歌手詳情頁歌曲列表點擊以及 vuex 的應用 、 歌手詳情頁歌曲列表實現隨機播放 。