如何从零开始用Electron Vue构建一个本地音乐播放器？

本文共计2122个文字，预计阅读时间需要9分钟。

为什么做？女友工作后是音视频后期，常会收集一些音频音乐，需要查看音视频的波形，每次用AU这种大型软件播放音频看波形，很不方便，看到她这么辛苦，心疼不已。

为什么要做？

女朋友工作是音频后期，平常会收集一些音频音乐，需要看音频的频谱波形，每次用au这种大型软件播放音乐看波形，很不方便，看到她这么辛苦，身为程序猿的我痛心疾首，于是，就有了这么一个小软件，软件涉及到的技术主要为electron,vue,node,波形的展示主要通过wavesurfer生成。

从零开始-搭建项目

项目通过vue脚手架搭建的，所以需要安装cli工具,如果已经装了，可以跳过这一步.

npm install -g @vue/cli # OR yarn global add @vue/cli

装好后,通过脚手架搭建项目

vue create music

vue需要与electron集成，这里社区已经有比较成熟的vue插件了,Vue CLI Plugin Electron Builder。

vue add electron-builder

懒人可以直接去clone我的搭建好得架子直接开发， 戳这里。