electron 将pc端（vue）页面打包为桌面端应用

背景

最近在学习RxJS，平时边看文档边顺手就敲一敲那些API，有时候想回顾一些自己写的东西，就要先把项目跑起来，这也难免有些麻烦。于是乎，就想着把自己写的这个小项目打包成桌面端，方面每次打开电脑就能看。经过网上查阅，比较成熟的解决方案很多，比如electron，nw.js等等。最终选定用electron，因为他的星星最多，哈哈。

这个练手Rxjs的小项目是用vue跑的，之前没玩过vue，顺手玩一下。打包桌面端，跟前端框架无关，只是想夸一下vue在构建项目上的体验真的好，简单方便，会以yes or no的形式让你完成一个主流的前端框架（回想以前构建angular应用，还要打开help，看一大堆api，在这一点用户体验上angular真是输了，不知道最近的ng5变没变）。

electron

Electron uses Chromium and Node.js so you can build your app with HTML, CSS, and JavaScript. Open Source Cross Platform Compatible with Mac, Windows, …

简单来说，electron是基于Chromium 和 Node.js 来构建一个跨平台应用的。Chromium是一个开源浏览器，与chrome区别是不会自动更新，但是一些新特性貌似会在Chromium先上。

electron-quick-start

最开始的时候，没敢直接在vue中插入这个electron(毕竟连怎么用都不知道)，于是先clone了一个starter来快速学习一下。

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
cnpm install //这里我用的是cnpm,npm太慢了 
npm start

项目跑起来之后，不出意外就出现了electron的桌面端页面，看了下其中的入口文件main.js

 mainWindow.loadURL(url.format({
    pathname