前言
Electron开发桌面应用比C/C++语言开发桌面应用更容易。C++语言特性繁多复杂，使用Electron开发桌面易上手，开发效率高。
当然，有团队的leader就会比较担心用Electron开发出来的应用是不是比不上C++的，不敢用，一开始就给否决了。不不不不…Electron内部封装了Chromium 浏览器核心和Node.js，Nodejs本身也是可以很方便地调用C++扩展等等…
而且我们可以知道，市面上用Electron开发的产品很多，最著名的就是我们每天使用的一款由微软开发的免费的IDE，VSCode（Visual Studio Code），这款桌面应用程序就是用Electron框架开发的。
市场上electron开发的应用
市面上用electron开发的知名的桌面应用程序有:
Visual Studio Code (微软做的编程IDE)、
Atom（由github开发的一款IDE）、
Postman (测试和开发以及调试API的工具)、
Typora (轻量级的Markdown编辑器)、
Axure (交互式原型设计工具)、
有道笔记 （做笔记的编辑器）
Discord（免费的通讯应用（语音、文本聊天应用））、
Slack (团队协作的聊天应用程序，包括聊天、文件共享和视频会议等功能)、
Skype (微软开发的免费的通讯应用程序，支持语音和视频通话)、
WahtsApp （国际社交软件）
等等等等，就不一一罗列了。
命令创建vue3项目
开发 vite 插件
用vite来进行编译和加载，编译过后就可以用electron的BrowserWindow打开就好了，vite插件这一块的官方文档在这。
这个很神，比如领导上级叫你把已经有的网站直接做成桌面应用程序，你直接套上去去打开就完事了。
win.loadURL('http://www.baidu.com') // 任何网址，但这里呢，我们用的是项目编译后的那个本地地址http://localhost:5173/ 或者 http://127.0.0.1:5173/
首先
在主目录下创建一个文件夹plugins，而后，创一个devPlugin.js文件
代码:
通过监听事件来判断httpServer启动了没，然后启动electron。
接着
在 主目录的src目录下创建一个main文件夹，里面创一个mainEntry.js
代码如下：
最后
在主目录下看到vite.config.js文件，进去把这个插件加上去，
代码如下:
跑起来
然后 npm run dev 跑起来
就得到一个electron窗口
做个简易版的“网易云音乐”
首先，就是接口，接口用的是网易云音乐API，先下载下来，用4000端口跑起来。
接口就可以拿 http://localhost:4000/banner —— 轮播图
轮播图效果图：
banner:
轮播图用的是Swiper
npm install swiper --save
接口NeteaseCloudMusicApi下载下来之后，用端口4000来跑PORT=4000 yarn start, 得到http://localhost:4000/,浏览器中打开，得到如下：
我们这里首页用的是banner这个接口，
请求接口:
const bannerList = ref([])
const getBannerList = async () => {
const res = await getBanner()
bannerList.value = res.banners
}
getBannerList()
首页推荐歌单：
效果图：
接口：
上代码：
移动端上下滚动这里，我们用Better-scroll来做。优化一下滚动卡顿和滑动过程的交互效果。
import BScroll from "@better-scroll/core"
const bScroll = ref(null)
onMounted(() => {
bScroll.value = new BScroll(scrollContainerRef.value, {
scrollY: true,
probeType: 3,
click: true,
bounce: {
top: true,
bottom: true
}
})
})
这里值得一提的是，由于一开始接口回来的数据还没有完全渲染完成，导致这个scroll组件无法滑动，可以用这种办法来解决这个问题：
watch(recommendList, () => {
nextTick(()=> {
bScroll.value && bScrol.value.refresh()
})
})
如此修改，就可以打造一个推荐歌单的滚动列表了。
总结
这里要说的是，electron 只是个壳，这个代码同样可以整理出来运用到h5页面，我们只是用这个类似网易云的界面效果来说明一下vue3结合electron来打造桌面应用，也可以做很多其他的桌面应用。或者抽离出来搞h5移动端。
