美文网首页Vue.js专区
electron-vue 开发桌面端---小白起步

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

作者: bouble | 来源:发表于2018-03-19 14:53 被阅读85次

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

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

    相关文章

      网友评论

      • 独山一奋青:重要的不是这个,这个容易,是后面的打包成安装包,然后点击exe文件可以在桌面生成快捷方式的

      本文标题:electron-vue 开发桌面端---小白起步

      本文链接:https://www.haomeiwen.com/subject/fhnuqftx.html