从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