Vue JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
microzhao
microzhao minify
Latest commit ec334c3 Sep 25, 2017
Permalink
Failed to load latest commit information.
build 1.9.0 Apr 5, 2017
config 2.0.0 Apr 7, 2017
src bug fixed Apr 11, 2017
static 1.9.0 Apr 5, 2017
.babelrc 1.0.0 Mar 15, 2017
.editorconfig 1.0.0 Mar 15, 2017
.gitignore 1.0.0 Mar 15, 2017
.postcssrc.js 1.0.0 Mar 15, 2017
README.md minify Sep 25, 2017
index.html minify Sep 25, 2017
music-data.json 2.0.0 Apr 7, 2017
package.json 2.0.0 Apr 7, 2017

README.md

Vue.js音乐播放器2.0升级版

之前初学Vue做了一个音乐播放器,受到不少人的喜欢。现在升级版来了!功能更强,技术栈更多。

源代码

源代码地址:👉 GitHub 欢迎大家star和follow😄

预览

在线预览

在线预览地址:👉 Vue音乐播放器

预览图

Vue音乐播放器升级版 - microzz.com

更多预览图请看👉 更多

技术栈

Vue2:采用最新Vue2的语法😁

Vuex:实现不同组件之间的状态共享✌️

vue-router:单页应用路由管理必备😎

axios:发起http请求😉

SASS(SCSS):css预处理语言💪

Express(上线版本是Koa2):因为vue-cli是用的Express做服务器,所以开源的开发版本是Express,自己生产环境用的是Koa2。 😜

Webpack:自动化构建工具,大部分配置vue-cli脚手架已经弄好了,很方便。😏

ES6:采用ES6语法,这是趋势。👏

localStorage(HTML5):本地存储,保存用户个性化设置。😊

CSS3:CSS3动画及样式。👍

使用 Build Setup

# install dependencies
npm install

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

# build for production with minification
npm run build

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

遇到的问题

  1. vuex什么时候使用,如何使用,就要看项目需要。引用 Redux 的作者 Dan Abramov 的话说就是:

Flux 架构就像眼镜:您自会知道什么时候需要它。

各组件之间状态共享也是难点。

  1. 异步编程:JS是单线程,异步编程尤为重要。当我们向后端请求数据,是异步的,如果没有处理好相关的异步操作,是会有各种问题的。JS可以利用setTimeout回调GeneratorPromiseAsync。 定时这种方式太麻烦,还是不推荐;回调层次多了,有回调地狱,代码维护性很差;Generator需要手动去执行,当然可以使用类似co的模块。相比之下PromiseAsync是比较理想的。(详看👉Promise对象异步操作和Async函数)
  2. 本项目中使用了QQ音乐和One(一个)的接口,后端API编写也是难点,包含了各种异步请求。对返回数据的解析也是难点,有的时候你还需要对数据进行解码。
  3. 各组件结构的设计:一开始大纲没设计好,后面想修改涉及面会很广。
  4. 过渡动画让交互更有趣,但是有的还是耗性能的,有设备差异,没用好会造成卡顿。

【声明】:本项目仅供学习交流,请不要用做任何商业用途😊有任何疑问请联系作者📩zhaohui@microzz.com

About

源代码地址:👉 GitHub

个人网站:🔗microzz-IT技术分享

GitHub:🔗microzz