Electron + Vue3 + ElementPlus (一)

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和切换自定义页面