随着浏览器的高速反正,桌面客户端的应用日趋减少,基本上如今现在的企业都已经逐步放弃桌面客户端。除非处于安全与性能的考虑,才重新开发客户端。
刚刚好我自己是一名WPF开发工程师,深深的明白了桌面端的狭隘。在拉勾上找工作,每次能能找到的工作都是在10个以内,一般都是半数,能有8个说市场很好了。
由于桌面端的开发沉重,周期较长,属于超级冷门的一个岗位了。不知道未来的在AI上是否能够让它热上一般。
闲话说完了,主题是electron-vue。
这个是一个全栈开发的框架,换句简单的话来讲就是一份代码能够满足多个平台,包括了桌面端,Web端,移动端。
开发是基于vue.js为基础框架,electron-vue,框架则是把electron和vue 做了个集合,不用用户手动去一个个搭建环境。
安装步骤
下面介绍我这边简单介绍一下步骤。
基于vscode来进行开发的,那么我这边在vs上打开了文件的终端之后。
1.键入命令
npm install -g vue-cli;
安装好vue-cli 脚架;
2. 然后安装electron-vue;键入命令:
vue init simulatedgreg/electron-vue my-velectron;
备注:
这里我自己遇到的问题是:‘vue’ 不是内部或者外部命令,也不是可运行的程序或者批处理文 件。原因是:vue没有加入到环境变量中。不过后面自己加的时候也是有问题,后面,我自己很粗暴的复制出了vue的安装路径(上一个命令安装完成之后直接有对应的路径,复制即可),来进行安装。
如:C:\Users\xxxxxx\npm\vue init simulatedgreg/electron-vue my-velectron;
完成了安装之后,输入项目信息
输入项目信息随后,打开我们的项目路径,安装提示,输入命令。
安装提示输入命令 项目完成,启动项目程序启动之后的界面:
第一个js开发的桌面端。文件结构
简单的介绍一下文件结构
总体的文件结构主要的代码结构:
我们即将开发的代码build-------是文件打包使用的
dist---------对应的不同平台文件资源
test--------单元测试
以上是如何基于electron-vue 构建一个桌面端的过程。
网友评论