搭建electron_vue项目

环境配置

1. vscode: 下载最新 下载
2. node: 16.20.2 下载，运行node -v查看版本
3. npm：会随着node一起安装
4. vue/cli: 5.0.8 运行npm install -g @vue/cli安装，最新版本为5.0.8，运行vue -V查看版本
5. electron: 13.0.0 (后续根据步骤安装)

搭建electron_vue项目:

搭建vue项目： 使用vue/cli搭建vue项目: vue create projectName_xxx

构建桌面应用： 在搭建好的vue项目上使用electron提供的构建工具electron-builder将vue项目构建成electron桌面应用

1. 构建方式： 在vue项目根目录下，运行vue add electron-builder

2. 遇到的问题： 运行electron-builder构建桌面应用失败，卡住不动的问题

   1. 解决： 需要设置electron镜像

   2. 设置镜像方式： 运行 npm config edit，此时会弹出npm的配置文档，或者在磁盘中找到该文档

3. 配置electron镜像

  ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/
  electron_mirror=http://npm.taobao.org/mirrors/electron/ 

4. node版本：16.20.2 ，使用最新的node版本可能会安装失败，最新的node移除了electron需要的包

3. 重新构建：运行vue add electron-builder，选择13.0.0版本

4. 此时就构建成功了，可以看见vue项目中多了electron主进程代码background.js

5. 查看package.json:

1. 运行npm run electron:serve启动桌面应用
2. 运行npm run electron:build打包桌面应用

此时运行npm run electron:serve就可以成功启动electron_vue项目了！