项目介绍网易云音乐界面+vue全家桶开发一个手机音乐webApp项目还在开发中，有兴趣的朋友可以参与我的私拍效果图：每日推荐歌单播放器（小）播放器（大）骨架屏首页详细信息测试地址开发总结项目结构vue-cli新建目录如下：---src------api//api放置目录--------base.js//axios的一些配置，接口域名地址，以及公共参数配置，后台约定的跨域配置，全局加载配置等。--------urls.js//放置接口url--------api.js//放置封装的promise请求------base//放置一些基础组件-----common----------js//publicjs----------sass//公共样式类库使用fastclick快速解决移动端vux300ms延迟搭建一些常规页面vue-lazyLoad图片延迟加载better-滚动轮播图片网易CloudMusicApiwy音乐接口，节点封装转发，部署在自己的服务器上路由按需加载constview=(path,name)=>()=>import(`@/components/${path}${name}`)//路由按需加载//这是使用vue异步组件实现路由的按需加载newVue({//...components:{'my-component':()=>import('./my-async-component')}})路由加载时，使用过渡动画组件添加切换动画。注意，如果要在VueRouter语法的路由组件中使用以上，必须使用VueRouter2.4.0+版本。播放器组件的大小播放器写了两个组件，MiniPlayer.vue和NormalPlayer.vue，因为想职责单一，所以没有放在一起。隐藏和显示由vuex管理。动画头部下降底部上升/*cssstyle*///transition下的第一个元素显示或隐藏时添加的样式//这两个类名是要定义的从开始到结束的持续时间和延迟。example-enter-active{transition:all0.4slinear以恒定速度对所有属性执行0.4s动画}.example-leave-active{transition:all0.4slinear执行0.4sanimationonallpropertiesisananimationatananstatespeed}//enterthebeginningoftransitionstate的触发时机是元素在插入前移除然后下一帧。example-enter{}//的触发时机离开过渡example-leave的结束状态在下一帧动画过渡完成时被移除。example-leave-to{}可以使用Mission:Impossible6中的haloskydiving来理解。example-enter-active是从离开飞机到打开降落伞的时间。example-enter是飞机坠落前的最后一刻。example-enter-to开始下降，加速度moment.example-leave-active是打开降落伞到落地的时间。example-leave是降落伞打开命令发出时。最后使用create-keyframe-animation为大播放器cd的x轴和y轴上的距离注册一个css3动画状态，然后使用transition动画方法hook在enter时运行动画，leave后清空动画进入。播放器的旋转也是如此定义一个旋转的css动画，在一个类中调用，播放状态时给它addClss，暂停时添加animation-play-state：pauseaudio的使用使用html5音频结合vuex实现播放器功能。包括进度条、播放、暂停、上一曲、下一曲、播放模式flex等布局大多使用flexwebpack中配置的低版本Android，加上前缀ios是考虑到固定元素的移动端问题。这种场景下，100%高度+绝对的方案更适合使用媒体查询。兼容一些768px以上的样式变形，在vue实例的mountedhook中使用rem注册resize和onload监听，计算最外层rem基准。使用骨架屏加载资源填充白屏，待优化成完整的主页面感谢vuevuexvue-routervuxvue-lazyLoadNeteaseCloudMusicApi服务端渲染。有反馈项目clone后显示不出来，因为接口使用的是我服务器上的地址，node端是Access-Control-Allow-Origin，也就是请求头中的orgin，所以建议克隆界面库在本地运行。修改了github中的操作方式。很多功能还没有实现，还有很多地方需要优化。欢迎大家提出问题或者建议，有空写一些。^-^github地址，欢迎star。
