node: 16.14.2
vue-cli: 5.0.4
之前在网上找了很多使用electron-vue的教程,但是这个框架比较老,问题也很多,自己摸索的使用vue-cli-plugin-electron-builder插件,发现挺好用,现在分享给大家
1.创建Vue项目
这里使用vue ui来创建
输入后会自动打开浏览器页面,没有打开的话输入提示地址就可以
打开后的页面
点击创建,上方输入创建项目的路径(只是路径不带项目名),我准备在D:/code/ele下创建项目
选好路径后点击下方 在此创建新项目,进入创建项目页面,根据图上所示,按自己需求来,之后点击下一步
选择完毕后点击创建项目,等待项目创建完毕
创建完毕,点击插件,之后点击右上角添加插件
输入vue-cli-plugin-electron-builder,安装第一个,等待安装
安装完毕后,出现配置界面,选择electron版本 13.0.0,完成安装,等待安装完成
完成之后再到插件界面,右上角添加vue-router
添加完毕,使用ide打开项目
项目结构
打开package.json,运行electron:serve
问题: 运行之后并没有打开应用,一直卡在这个界面
进入background.js,把第5行和第60行注释掉
运行
出现这个界面就完事了,下一期说整合ElementPlus和切换自定义页面