二、HelloWorld——快速使用

最初我是参考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()
})

...