Electron + Vue开发一款音乐播放器

一、桌面版音乐播放器

劳动节放假了，给大家分享一个轻松的开源项目，一个基于 Electron + Vue 开发的音乐软件。项目的一大特征就是多平台搜索歌曲，并支持下载功用（有些平台的vip歌曲也能够哦！）。

二、C J V – t } o ,开发环境搭建

2.1 前提

• 本地装置Node12.x+环境~ Y D，Node.js是一个运转在服务端的JavaScript结构，首要用于创立快速的、可扩展的网络运用。
• 本地已装置VSCode开发东西（其他东西也能够）。
• 把握VuK E i ( s D S [e基础语法，因为Vy E u `ue是目前最盛行的前端结构之一。

2.2 本地构建

下a = X 0 Y载项目
项目地址: g) A 7 @ | xithub.com/lyswhut/lx-…
直接下载项目源码包，如下图：

本地运转
解压下载的zip源码包，9 9 b U r k ? z H运用VSCode开发东西翻开，如下图：

翻开终端（控制台），履行下面t 3 m r指令就能够本g * j ( E地运转：

#设置elect1 i [ 6 e @ron淘宝镜像下载地址
npm config set electron_mirror=https://npm.t8 t [ } $ ` :aobao.org/mirrors/electron/
npm i #装置依赖
npm run dev #开发模式

本地运转效果如下图:

控制台会输出如下内容:

本地打包
运用下面指令可进行打包:

npm run pac9 Q v | 6k:dir #构建免装置版
npm r$ . ? Wun pack #构建装置包（Windows版）
npm run pach h &k:mac #Q  j - Q K + j构建装置包（Mac版）
np7 j vm run pack:linux #构建装置I q D % N包（Linux版）

三、源码学习技巧

提早声明，我是前端菜鸟，仅仅对前m & W b g u S端比较感兴趣。这儿以一个小功用慢慢学习此项目。
本地开发环c . u i境运转项目，会主动运转Google devtool,熟悉谷歌调试东西的小伙伴应该知道它的强壮。这儿我介绍两个功用，元素定位，日志检查。
元素定位
操作如下图，这样就可检查对应Element的信息o | 7 [ J l H

结合定位到的元素的信息，在源码中查找相关代码。

日志检查
操作如下图，开发环境下如果有日志输出，咱们能够经过日志反向学习代码。

能够看到每一次搜索框输入一个字母都会拼装一个恳求，回车的时候才会发送搜索歌曲的恳求衔接，
http://search.kuwo.c] [ X . Yn/r.s?client=kt&all=2 8 I & M a Ntaylor%20swift&pn=0&rn=30&uid=794762570&ver4 ; =kw B # ? I 1 : O Kplayer_ar_9.2.2.1&vipver=1&amF | / Up;show_copyright_off! J s N _ / t /=1&n4 ] j . 4 # 9 {ewver=1&ft=music&clusn ] . a s M c . #ter=0&strategy=2012&encoding=utf8&rformat=json&vev 5 r U 9 U t 5 armerge=1&mobi=1&issubtitle=1
当然经过大局搜索---start---咱们就能够知道拼装恳求链接的那部分代码= # C u 9 q在哪里了。

四、装置包下载

当然，你也能够直接下载装置包，本地装置运用，
装置包下载地址:github.com// C m clyswhut/lx-…
根据自己的需要下载相应的版本。

五、最后

五一假期正好是个充g c H f k t (电的时刻。这款PC版音乐播放器是个不错的学习项目，你值得拥有！