Electron + Vue开发一款音乐播放器
一、桌面版音乐播放器
劳动节放假了,给大家分享一个轻松的开源项目,一个基于 Electron + Vue 开发的音乐软件。项目的一大特色就是多平台搜索歌曲,并支持下载功能(有些平台的vip歌曲也可以哦!)。
二、开发环境搭建
2.1 前提
- 本地安装Node12.x+环境,Node.js是一个运行在服务端的JavaScript框架,主要用于创建快速的、可扩展的网络应用。
- 本地已安装
VSCode
开发工具(其他工具也可以)。 - 掌握Vue基础语法,因为Vue是目前最流行的前端框架之一。
2.2 本地构建
下载项目
项目地址: https://github.com/lyswhut/lx-music-desktop
直接下载项目源码包,如下图:
本地运行
解压下载的zip
源码包,使用VSCode
开发工具打开,如下图:
打开终端
(控制台),执行下面命令就可以本地运行:
#设置electron淘宝镜像下载地址
npm config set electron_mirror=https://npm.taobao.org/mirrors/electron/
npm i #安装依赖
npm run dev #开发模式
本地运行效果如下图:
控制台会输出如下内容:
本地打包
使用下面命令可进行打包:
npm run pack:dir #构建免安装版
npm run pack #构建安装包(Windows版)
npm run pack:mac #构建安装包(Mac版)
npm run pack:linux #构建安装包(Linux版)
三、源码学习技巧
提前声明,我是前端菜鸟,只是对前端比较感兴趣。这里以一个小功能慢慢学习此项目。
本地开发环境运行项目,会自动运行Google devtool
,熟悉谷歌调试工具的小伙伴应该知道它的强大。这里我介绍两个功能,元素定位,日志查看。
元素定位
操作如下图,这样就可查看对应Element
的信息
结合定位到的元素的信息,在源码中查找相关代码。
日志查看
操作如下图,开发环境下如果有日志输出,我们可以通过日志反向学习代码。
可以看到每一次搜索框输入一个字母都会组装一个请求,回车的时候才会发送搜索歌曲的请求连接,
http://search.kuwo.cn/r.s?client=kt&all=taylor%20swift&pn=0&rn=30&uid=794762570&ver=kwplayer_ar_9.2.2.1&vipver=1&show_copyright_off=1&newver=1&ft=music&cluster=0&strategy=2012&encoding=utf8&rformat=json&vermerge=1&mobi=1&issubtitle=1
当然通过全局搜索---start---
我们就可以知道组装请求链接的那部分代码在哪里了。
四、安装包下载
当然,你也可以直接下载安装包,本地安装使用,
安装包下载地址:https://github.com/lyswhut/lx-music-desktop/releases
根据自己的需要下载相应的版本。
五、最后
应的版本。
[外链图片转存中…(img-iNGfGJ2U-1588681108804)]
五、最后
五一假期正好是个充电的时间。这款PC
版音乐播放器是个不错的学习项目,你值得拥有!
Electron + Vue开发一款音乐播放器相关推荐
- java计算机毕业设计vue开发一个简单音乐播放器(附源码、数据库)
java计算机毕业设计vue开发一个简单音乐播放器(附源码.数据库) 项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ec ...
- java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署 本源码技 ...
- java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署 本源 ...
- JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计vue开发一个简单音乐播放器计算机源码+lw文档+系统+调试部署+数据库 本源码技术栈: 项目 ...
- 基于H5+js开发一款音乐播放器
前言:当下音乐播放器不胜其数,为了更好的掌握一些东西,我们来自己制作一个音乐播放器. 文章目录: 一.开发环境: 二.页面视图: 1.主文件入口(首页): 2.音乐播放界面: 三.功能实现 (1).i ...
- 【开源推荐】进阶实战,从一款音乐播放器开始
0.前言 前面有同学问我,想要做一个Android 实战项目,问我有没有好的开源项目可以参考和练习? 想想自己以前也是,当项目没有什么新任务的时候,想着自己写一个实战项目来来练练手,那拿什么项目来练手 ...
- 基于Android系统开发的简易音乐播放器
大概做了一周左右,一个简易版本的音乐播放器.主要有三个界面,先上图: 一个主界面:主要负责1加载外部存储的音乐文件信息到应用内置数据库中2转到音乐文件列表界面 一个音乐文件列表界面:主要1负责展示音乐 ...
- 好程序员前端分享使用JS开发简单的音乐播放器
好程序员前端分享使用JS开发简单的音乐播放器,最近,我们在教学生使用JavaScript,今天就带大家开发一款简单的音乐播放器.首先,最终效果如图所示: 首先,我们来编写html界面index.htm ...
- python3GUI--打造一款音乐播放器By:PyQt5(附下载地址)
文章目录 一.准备工作 1.PyQt5 2.qtawesome 二.预览 1.启动 2.歌曲搜索 3.歌曲播放 4.评论查看 5.自定义背景 6.设置-基本设置 7.设置-高级设置 8.定时任务 三. ...
最新文章
- AI 如果 “智力爆炸” ,只有普通智力的人类是蝼蚁还是宠物?
- Docker 大势已去,Podman 万岁
- matlab调用opencv的函数
- java cv bgr2gray_CV_BGR2GRAY vs CV_GRAY2BGR | 学步园
- vue中用的swiper轮播图的用法及github的地址
- 从java读取Excel继续说大道至简 .
- 微软Code Hunt答案(00-05)——沉迷娱乐的我
- Linux搭建深度神经网络,linux服务器搭建深度学习环境
- 干货 | 科研大牛们怎么读文献?
- Redis 6.0 源码阅读笔记(10) -- 主从复制 Master 节点流程分析
- ATL之深入浅出书评(转)
- 091 类的多态和多态性
- noi2016试题C语言,noip2016普及组初赛试题和答案.pdf
- 总结几个查找论文网址
- 6 款顶级 Android 数据恢复软件列表
- linux有个很大的内存目录,Linux中的内存管理
- 飞书机器人python给用户发信息api调用
- 【1047】删除字符串中的所有相邻重复项
- python学习 论语提取原文
- VR三维数字沙盘电子沙盘大数据可视化交互GIS系统开发教程第15课
热门文章
- 五.文件的读写+字典
- 白话CTC(connectionist temporal classification)算法讲解
- udev 挂载SD卡 USB设备
- 腾讯微博列表展示的功能实现
- 基于蓝牙4.0的蓝牙打印机 低耗电蓝牙 BLE (Bluetooth Low Energy)
- html div纵向排列,使用html css垂直排列4个div垂直使用html css
- 编译原理笔记03-词法分析
- 树莓派raspberry 安装ubuntu18.04 server + desktop + ros1
- electron-vue operation not permitted
- 子桓说:从人类第一次看到黑洞照片,发现职场中“错误”的力量