vue构建electron桌面应用

    electron桌面应用，可以结合前端框架vue使用，而我们也可以通过vue工具来构建electron的应用，这就需要我们全局安装vue-cli，通过vue构建electron应用的脚手架，推荐使用SimulatedGREG/electron-vue，这个与我们的webpack构建方式很像，也是vue init simulatedgreg/electron-vue projectname。

    这里给出一个示例：

    1、安装vue-cli。

    $ npm install -g vue-cli

    全局有了vue，我们就可以通过vue命令来构建应用了，可以检查一下vue版本。

    

    2、通过simulatedgreg/electron-cli脚手架构建应用。

     

    项目初始化过程中会提示一些设置信息，这些信息会加入package.json中，可以根据需要设置，一般默认即可。

    项目初始化完成，会有个安装依赖，以及开发模式下运行的命令:

    

    3、根据命令，我们需要进入项目目录，然后通过yarn 或者npm安装依赖，然后启动项目，我这里使用的是npm。

    $ cd firstapp
    $ npm install

       

    4、开发模式启动项目：

    $ npm run dev 

    启动项目的过程截图：

     

    完整的界面：

     

    其实整个构建过程，和普通的vue项目构建并没有太大的区别，就是使用的脚手架不一样而已。这里使用的是simulatedgreg/electron-vue，我们可以在用户目录下的.vue-templates目录中看看我们的脚手架信息。

     

    simulatedgreg-electron-vue和webpack都会在.vue-templates目录下。