最初我是参考https://www.zhihu.com/column/c_1213109295430131712这系列的文章来搭建 Electron + Vue 的环境的。其实还是比较简单，建议大家可以先参考这系列的文章。但是有几点可能作者没说太清楚，所以一直摸索了很久才成功搭建最初始的环境，在这里就说一下我遇到的一些坑吧。
1. 安装vue-cli
npm install @vue/cli -g
2. 使用vue-cli创建项目
选择一个项目存放路径，执行命令创建项目
vue create electron-vue-helloworld
具体配置请参考vue-cli的官方解析
此时运行npm run serve，打开浏览器即可看见vue脚手架帮你创建好的项目了
3. 使用electron-builder集成electron
执行下面命令
vue add electron-builder
这个时候会安装electron-builder的依赖，可能比较耗费时间，请大家耐心等待，安装完成后会出现以下选型：
? Choose Electron Version (Use arrow keys)
^6.0.0
^7.0.0
❯ ^8.0.0
选择其中一个版本，等待安装。然而这一步可能有些人会安装不成功，由于官方electron的镜像源在国外，因此下载速度超级慢，所以我们这是可以借用一下淘宝镜像来下载安装：
npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
或者把ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/直接写到配置文件也是一样的。
配置好淘宝源后，再次执行vue add electron-builder来安装即可。
4. 运行程序
执行以下命令运行程序
npm run electron:serve
稍等片刻，编译成功后会自动打开一个桌面程序
image
有些人启动时可能会很久，https://zhuanlan.zhihu.com/p/107590214这篇文章也作出了解释，是由于vuejs devtools的安装，会重试5次（反正我是没有装上了），如果每次启动都觉得等这个很久的同学，可以把background.js安装VUEJS_DEVTOOLS的那几行代码注释了，这样就不会每次启动的时候都会尝试安装
...
app.on('ready', async () => {
if (isDevelopment && !process.env.IS_TEST) {
// 注释以下部分
// Install Vue Devtools
// try {
// await installExtension(VUEJS_DEVTOOLS)
// } catch (e) {
// console.error('Vue Devtools failed to install:', e.toString())
// }
}
// createLoginWindow()
createMainWindow()
})
...
