用Vue高仿qq音乐官网-pc端

andot 发布于2019-08-20 17:17 / 3060人阅读

摘要：目前只用到和音乐的轮播图不用说，音乐这个网站的页面我是真的挺喜欢，不光是他的设计，页面的布局也很美观，在控制台调试的时候可以看看它的结构，非常有层次而富有美感，即使加上一层也不会有违和感。由于安全原因，跨域访问是被各大浏览器所默认禁止的。

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

效果预览

部分地方不全部根据原版，也有自由发挥的，目前功能模块比较简陋，如果加载太慢，可以下载下来再本地运行

网易云音乐API

项目地址：github

预览地址：demo

Build Setup

# install dependencies
cnpm i
(可以用cnpm或yarn，更方便快捷，你值得拥有)

# serve with hot reload at localhost:8564
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# 网易云API部署 listen localhost:3000
npm run start

技术栈

vue(数据绑定)

vue-router

vuex(管理组件状态，实现组件通信）

webpack(打包工具)

scss（原来想用stylus,回头看看我都快写完了...）

axios（我等下要重点讲这**）

组件库: element-UI(本来想用muse-UI,感觉那个更cool，下次吧..)

API: 网易云音乐API(仿qq音乐我用网易云音乐的东西，你怕不怕...)

核心功能组件的实现 搜索功能

播放功能

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

跳转功能

(目前子目录只开通歌手列表)

自己挖的坑，自己埋 vuex的模块应用

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

qq音乐的轮播图

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

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

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

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

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

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

app.all("*", function (req, res, next) {
res.header("Access-Control-Allow-Credentials", true)
res.header("Access-Control-Allow-Origin", "*")
res.header("Access-Control-Allow-Headers", "X-Requested-With")
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS")
res.header("X-Powered-By", " 3.2.1")
res.header("Content-Type", "application/json;charset=utf-8")
next()
})

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

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

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

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

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

proxyTable: {
   "/api": {
   target: "[1]",
   changeOrigin: true,
   pathRewrite: {
   "^/api": "/"
   }
  }
 }

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

终于

这是我第一个用vue撸的项目，可能功能有点简陋，很多地方有待提高，不过这次实践让我对组件化的理解有了一定的提升，后期会继续加入其它功能模块的，文中有用词不对的地方，欢迎大家指出，项目有什么bug，也希望大家多多提issue

如果对你有帮助，给个star吧

找工作中

云服务器 GPU云服务器高仿qq侧滑删除 java版高仿qq pc端 pc端cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83456.html

Vue全家桶高仿网易云音乐mac客户端版（不像赔十个！！）

摘要：库用了魔改样式的歌词滚动部分用了黄轶老大的贼爽主题换肤用的变量替换。语言的下一代标准预处理器安装与使用前端项目后端项目音乐播放器虽然烂大街了，但是作为前端没自己撸一个一直是个遗憾，而且偶然间发现pc端web版的网易云音乐做的实在是太简陋了，社区仿pc客户端的网易云也不多见，为了弥补这个遗憾，就用vue全家桶模仿mac客户端的ui实现了一个，欢迎提出意见和star~ 预览地址源码地址...

mgckid 2019-08-26 10:23 评论0 收藏0
高仿腾讯QQ Xplan（X计划）的H5页面（1）：threejs创建地球

摘要：首先是这个地球，得看看它是真还是假因为很多效果是拿雪碧图做的，比如这里的旋转的飞机，结果找到了并且在网站文件中搜到了，那就是没跑了。上个月底，在朋友圈看到一个号称这可能是地球上最美的h5的分享，点进入后发现这个h5还很别致，思考了一会，决定要不高仿一个? 到今天为止，高仿基本完成，线上地址 github地址除了手机端的media控制没有去兼容，其他的基本都给仿了。那为了让你...

MartinHan 2019-08-20 17:02 评论0 收藏0
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器

摘要：高仿低配网页版网易云音乐播放器前言没有使用任何框架，只是想用最简单纯的代码实现下前台后台是参考网上的例子写的，代码是在的基础上重新写的还有她的姊妹篇网易云音乐移动端，请查看这里写在前头的话鄙人野生前端一只，专业，自学前端已经一年多了 HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 showImg(https://segmentfault.com/img/remo...

RaoMeng 2019-08-20 14:26 评论0 收藏0
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器

摘要：高仿低配网页版网易云音乐播放器前言没有使用任何框架，只是想用最简单纯的代码实现下前台后台是参考网上的例子写的，代码是在的基础上重新写的还有她的姊妹篇网易云音乐移动端，请查看这里写在前头的话鄙人野生前端一只，专业，自学前端已经一年多了 HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 showImg(https://segmentfault.com/img/remo...

sean 2019-08-30 15:52 评论0 收藏0