Vue.js专区

electron-vue 开发桌面端---小白起步

2018-03-19  本文已影响85人  bouble

    随着浏览器的高速反正,桌面客户端的应用日趋减少,基本上如今现在的企业都已经逐步放弃桌面客户端。除非处于安全与性能的考虑,才重新开发客户端。

    刚刚好我自己是一名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 构建一个桌面端的过程。

上一篇下一篇

猜你喜欢

热点阅读