/vue-163-music

web版的网易云音乐

Primary LanguageVue

熟练VUEJS--仿造pc网易云音乐

在学习完vueJS,一直想做个项目来锻炼一下,选来选去，还是做个网易云音乐，其间遇到了很多坑,也逐渐接受了vue这种组件化的**以及从Dom操作转换为用数据去驱动视图。并且在某部分基础组件上借鉴(搬运)了elementUI的源码(不过elementUI写的是真好)

技术栈

  • Vue.js
  • Vuex
  • Vue-router
  • axios
  • Binaryify提供的API 在其中也知道了组件之间在不同场景之间的数据传输方式(父子prop, 兄弟EventBus,多个组件共享vuex)

已完成功能

  • 首页
  • 播放器功能 -- 上一曲, 下一曲, 暂停等功能
  • 歌单展示/详情页
  • 专辑展示/详情页
  • 歌手展示/详情页
  • 歌词列表
  • 单曲详情页
  • 评论

项目运行

npm istall 

npm run dev

// 在163Api文件路径下启动

node app.js

遇到的问题

  1. 繁琐的API的调用,由于使用的Api的接口很多,如果要一个一个写的话,太冗余,在看了掘金上一边文章之后,果断的用了Proxy代理方式
import axios from 'axios';

axios.defaults.baseURL = `http://localhost:3000`

export const api = new Proxy({}, {
  get(target, prop){
    let method = /^[a-z]+/g.exec(prop)[0];
    let path = prop
              .substring(method.length)
              .replace(/([A-Z])/g, '/$1')
              .replace(/(\$)([a-z]+)/g, '?$2=')
              .toLowerCase();
    return function(data = "", options = {}, and=false){
      let url = `${path}${data}`;
      if(and){
        for(let [key, value] of Object.entries(options)){
          url += `&${key}=${value}`;        
        }
      } 
      return axios({ method, url })
    }
  } 
})
  1. 整体项目的设计,奉劝大家一句,在项目的构建中,最好提前提前规划好数据的流通以及各个组件的交互,否则会出现大量冗余的代码，后面修改的话会很麻烦
  2. 组件共享状态,在vue中目前常用的数据传递方式有props,EventBus,vuex根据应用场景的不同来使用它们
  3. 性能问题，再用chrome的lighthouse测试下才37的评分,无疑是不合格的,后续会学习性能优化的相关知识，在以后更新会考虑到性能问题

项目地址

源代码,希望大家指出我代码的不足之处，多交流,也欢迎大家来follow和star

预览图