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

2019年8月25日 201次阅读 来源: melrus

一向想做一个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音乐我用网易云音乐的东西，你怕不怕…)

中心功用组件的完成

搜刮功用

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

播放功用

《用Vue高仿qq音乐官网-pc端》
   (播放页面正在完美中，款式只是也许，待细化…)

跳转功用

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

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

本身挖的坑，本身埋

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()
})

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

  • 然后它就会报错~，详细缘由是你同一个端口请求雷同端口的东西,不好意思，那不叫跨域…

②. 针对当地差别端口的服务器之间的跨域

  • 就是将上面的头文件放在当前项目请求的服务器的谁人api中。

③. 针对当地服务器对域名服务器接见的跨域题目

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

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

就是你当前想接见的api地点，项目中接见的时刻就只要用/api做反向代办即可

终究

  •  这是我第一个用vue撸的项目，能够功用有点大略，许多处所有待进步，不过此次实践让我对组件化的明白有了肯定的提拔，后期会继承到场别的功用模块的，文中有用词不对的处所，迎接人人指出，项目有什么bug，也愿望人人多多提issue

  • 假如对你有协助，给个star吧

  • 找工作中

    原文作者：melrus
    原文地址: https://segmentfault.com/a/1190000009791639
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞