V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lensh
V2EX  ›  Vue.js

vue 全家桶+Express/Koa2 打造一款音乐播放器

  •  1
     
  •   lensh · 2017-08-08 12:34:47 +08:00 · 2018 次点击
    这是一个创建于 2690 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Vue 全家桶打造的一款音乐播放器

    预览

    在线预览地址: https://music.lenshen.com

    源码地址: https://github.com/lensh/vue-music

    技术栈

    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 动画及样式。

    使用

    npm install

    npm run dev

    遇到的问题

    异步编程:JS 是单线程,异步编程尤为重要。当我们向后端请求数据,是异步的,如果没有处理好相关的异步操作,是会有各种问题的。JS 可以利用 setTimeout、回调、Generator、Promise、Async。 定时这种方式太麻烦,还是不推荐;回调层次多了,有回调地狱,代码维护性很差; Generator 需要手动去执行,当然可以使用类似 co 的模块。相比之下 Promise 和 Async 是比较理想的。

    本项目中使用了 QQ 音乐和 One 的接口,后端 API 编写也是难点,包含了各种异步请求。对返回数据的解析也是难点,有的时候你还需要对数据进行解码。

    各组件结构的设计:一开始大纲没设计好,后面想修改涉及面会很广。

    过渡动画让交互更有趣,但是有的还是耗性能的,有设备差异,没用好会造成卡顿。

    sunjourney
        1
    sunjourney  
       2017-08-08 17:29:12 +08:00
    进来之前是想看 Express/Koa 用来干嘛的,进来之后...
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3651 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 10:28 · PVG 18:28 · LAX 02:28 · JFK 05:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.