vue-electron制作网易云音乐客户端

前言

就在两个月前公司需求快速开发一款桌面应用软件，嗯，快速。

并且提供了技术方案Nwjs，起初不知道这款框架的存在，网上查找了一波，发现更牛逼的一款快速搭建桌面应用的框架，那么它就是electron。

很好，前端er任务又来了，开发过程中踩了不少坑，一个缺点就是体积大。其他方面简直就是帅呆了，酷毙了，简直无法比喻了。自动更新、本地菜单和通知、系统奔溃报告、调试和分析、Windows安装程序，简直为我们节省了不少时间，大赞一个。

这里我们不对electron做过多的介绍，大家自行看官方文档。

切入正题，通过对electron的一些了解，业余时间通过vue、electron搭建了一个网易云音乐客户端，因为时间关系只做了客户端的核心部分，有时间更新，这个项目会坚持做下去。

技术栈

• vue全家桶(vue vue-router vuex)
• electron(应用框架)
• request(请求数据)
• ES6
• SCSS
• 更多...

启动运行

npm instal --- 安装依赖
cd api/ npm install && npm start --- 启动api服务
npm run dev --- 运行项目
npm run build --- 打包本地项目

关于打包大家自行在官方查找相关配置，这里就不一一介绍了。

功能

• 用户手机号登录
• 用户菜单
• 条件搜索
• 播放记录列表
• 播放详情
• 音量大小
• 更多...

功能看起来不多，精品在于细节，主进程与渲染进程的一些方法封装、组件封装、vuex的状态管理应用。

先看一下运行效果视频

...

再来几张张图片

是不是很赞，因为我电脑是是MacOs系统，客户端界面只做了Mac系统界面Windows运行起来所看到的是一款MacOs的应用，看起来感觉怪怪的。不过话说回来，现在前端干的事儿真不少，Web、混合App开发、游戏、桌面应用。

嗯，加油前端！！！

源码

源码地址：https://github.com/eugeneCN/v...

喜欢的小伙伴点个star吧。