从0到1创建electron-vue项目

从0到1创建electron-vue项目

项目背景

团队要开始新的项目，鉴于旧项目的环境相对落后。新项目准备将electron升级到较新版本，遂开始尝试升级本地环境，构建electron-vue项目。同时将旧项目内的功能逐一进行迁移。

环境搭建

1) node

• 下载nvm进行本地node版本管理，确保与旧项目node环境不冲突

• nvm list available （查看可获得的node版本选择适合版本）
  

• nvm install 20.13.0 （下载node当前最新LTS）
  

• nvm use 20.13.0 （使用20.13.0）

• node -v （查看当前node版本）
  

2) vue

• npm i -D @vue/cli (创建脚手架)

• vue -V
  

项目搭建

1）使用vue脚手架搭建项目

vue create electron

2) 进入创建的项目根路径

cd electron-demo

3) 使用electron-builder搭建electron

默认选的electron版本为13，electron官网上推荐nodev20对应的electron版本为29+，遂继续npm install electron@29.0.0

项目框架搭建完成

进入package.json

调用npm run electron:serve启动项目

期间有warning

index.js有冲突，在vue.config.js中将打包生成的index.js重命名为background.js

执行npm run electron:build 完美撒花~~

启动时，出现launching electron failed to fetch extension
参考https://blog.csdn.net/qq_34988204/article/details/133795754