Vue3.0 + typescript 高仿网易云音乐 WebApp

Vue3.0 + typescript 高仿网易云音乐 WebApp

前言

Vue3.0 的正式发布，让我心动不已，于是尝试用 vue3 实现一个完整的项目，整个项目全部使用了 composition api, 相比较 options 方式，逻辑更加清晰，使用也更加灵活。

先贴上地址，喜欢的可以 star 一波
源码地址 : https://github.com/bianyingchun/vue3-music
这里还有 react hooks 版本

项目介绍

本项目是使用 vue-cli 4.5 搭建的项目, vue-router 以及 vuex 均为 4.0 版本，以支持 composition api 的使用。使用 typescript 编写完成。该项目的所有数据接口来自大佬 binaryify 的网易云音乐 NodeJS 版 API。

本项目将会持续维护开发中，目前实现了以下模块:

滚动加载更多

这个项目中几乎所有的列表页都使用到了滚动加载更多的逻辑，于是我封装了一个公共 hooks,以供复用

import _ from 'lodash'
import {
    Ref, onMounted, onUnmounted } from 'vue'
export function useLoadMore(
  refreshElm: Ref<null | HTMLElement>,
  loadData: () => any
) {
   
  let element: HTMLElement
  const _loadMore = _.throttle(() => {
   
    const containerHeight = element.clientHeight
    const scrollTop = element.scrollTop
    const scrollHeight = element.scrollHeight
    if (containerHeight + scrollTop + 20 >= scrollHeight) {
   
      loadData()
    }
  }, 200)

  onMounted(() => {
   
    element = refreshElm.value as HTMLElement
    element.addEventListener('scroll', _loadMore)
  })
  onUnmounted(() => {
   
    element.removeEventListener('scroll', _loadMore)
  })
  return {
   }
}

主题切换

通过 css 变量和 sass mixin 的结合，实现了明暗主题的切换，当然你可以定义不同的主题。

@mixin css-var(
  $text,
  $text-reversal,
  $text-nav,
  $header-bg,
  $text-secondary,
  $primary,
  $link-bg,
  $body-bg,
  $module-bg,
  $border
) {
   
  #{
   --body-bg}: $body-bg