electron-vue前端开发桌面应用(一)——入门

2,098 阅读2分钟

写在前面

离开前端行业很久了,回到老家发展之后在新单位工作一段时间之后,单位领导得知我以前是写代码滴,想要做一个员工生日系统,项目要求不难,但是哥们之前没有单独做过桌面应用开发,C语言神马的也更是一窍不通,通过度娘了解到electron,本着能偷懒就偷懒的原则,也为了开发更加方便,最后采用了electron-vue,官方文档如下:

官方文档

项目初始化

 //如果没有全局安装vue-cil脚手架,需要执行这一步
npm install -g vue-cli 
//利用electron-vue初始化项目
vue init simulatedgreg/electron-vue my-project
//初始化完成后进入my-project文件夹
cd my-project
//安装项目依赖
npm install
//启动程序
npm run dev

这个时候你看到应该是下面这样的界面,说明已经启动成功了

如果不是,恭喜你踩坑了,而恰巧你也出现了下面的界面,先不要慌~

通过百度并查看到gorkes的文章之后,发现是node版本问题,这里需要降低node版本至10.16.0,本着好人做到底的原则,下面是10.16.0的下载地址,再次安装依赖包,就可以成功启动了

身为强迫症的我发现虽然项目成功启动,运行也没有问题,但是在控制台上有三个警告,下面要说的就是如何去掉这几个烦人的警告,你只需要在项目目录中找到main.js并加上下面这行代码

process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'

ok!!!至此项目的初始化工作就完成了,让我们看看最终的效果吧

本文章将持续更新,希望你点个关注吧,另外你也可以将你的经验和问题留言给我,我们一同进步~~