用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 的应用 、 歌手详情页歌曲列表实现随机播放 。