大三程序员用Vue高仿QQ音乐官网，毕业想找一份15K的工作不难吧？

今天逛论坛看到一位大三的程序员学生分享了他的项目，自己也copy了一份，送给头条号上想练习自己水平的同学可以去练习下，这位大三学生是想自己找份工作，我觉得能做出这个找份15K的工作也不是太难吧，毕竟现在VUE也是大火的框架。

这篇文章分享之前我还是要推荐下我自己的前端群：593757064，不管你是小白还是大牛，小编我都挺欢迎，不定期分享干货，包括我自己整理的一份2017最新的前端资料和零基础入门教程，欢迎初学和进阶中的小伙伴。

一直想做一个vue项目 然后呢 我就做了

Build Setup

技术栈

核心功能组件的实现

• 搜索功能

播放功能

(播放页面正在完善中，样式只是大概，待细化...)

• 跳转功能

自己挖的坑，自己埋

1. vuex的模块应用

• 一开始我并没有使用vuex，因为我觉得目前这个项目比较小，并不需要它来管理数据，毕竟vuex针对大项目来说确实很好用，但是后来考虑到如果后期该项目我还要 维护，数据量一大，还是要重新分类数据，所以中途某些地方插入了vuex的使用，这就很大一部分影响了项目进行的进度。（目前只用到action和state）

1. qq音乐的轮播图

• 不用说，qq音乐这个网站的页面我是真的挺喜欢，不光是他的设计，页面的布局也很美观，在控制台调试的时候可以看看它的结构，非常有层次而富有美感，即使加上 一层margin,padding也不会有违和感。这就造就了它的轮播图结构比较麻烦，不是说做不出来，因为这是第一次上传的项目，我想先将大概的结构完善一下，后期再 维护，所以我就选用了element-UI里面的跑马灯式轮播图组件，大体来说，除了部分瑕疵以外，还是高度还原了原版轮播图的。

1. axios后端数据获取时产生的跨域问题

• 重点来了，这个是我在该项目中花了最多时间的地方，相信很多同学使用axios都碰到过我这个问题，目前我这里使用了三种方法处理该问题，请大家针对自己的项目 问题对号入座

• 跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的。

①. 针对本地相同端口服务器之间的跨域

• 这是我刚开始碰到问题时使用的第一种，这个时候你只需要找到build文件中的dev-server，找到引用express的位置，给它加上一个头文件：

• 然后它就会报错~，具体原因是你同一个端口申请相同端口的东西,不好意思，那不叫跨域...

②. 针对本地不同端口的服务器之间的跨域

• 就是将上面的头文件放在当前项目申请的服务器的那个api中。

③. 针对本地服务器对域名服务器访问的跨域问题

• 找到当前项目congfig文件夹下index.js文件，然后在文件中将proxyTable内容改为：

• 就是你当前想访问的api地址，项目中访问的时候就只要用/api做反向代理即可

这个PC端QQ音乐项目到这里就结束了，想要完整代码自己学习练手的小伙伴进我的群自助领取，已经上传到群文件里了：593757064，欢迎初学和进阶中的小伙伴。

如果想看到更加系统的文章和学习方法经验可以关注我的微信公众号：‘web前端课程’关注后回复‘给我资料’可以领取一套完整的学习视频