vue-music 音乐网站

在学习完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 })
    }
  } 
})

复制代码

2. 总体项目的设计,奉劝你们一句,在项目的构建中,最好提早提早规划好数据的流通以及各个组件的交互,不然会出现大量冗余的代码，后面修改的话会很麻烦
3. 组件共享状态,在vue中目前经常使用的数据传递方式有props,EventBus,vuex根据应用场景的不一样来使用它们
4. 性能问题，再用chrome的lighthouse测试下才37的评分,无疑是不合格的,后续会学习性能优化的相关知识，在之后更新会考虑到性能问题

项目地址

源代码,但愿你们指出我代码的不足之处，多交流,也欢迎你们来follow和star

预览图