使用vue和electron进行桌面应用开发

使用vue和electron进行桌面应用开发， electron官网 ，
面对需求，研究学习了两者的联合使用
vue，在前端领域比较火，轻量级的单页面应用框架，上手较angular,react会容易一些，而且vue-cli可以快速的新建一个工程。
Electron相当于一个浏览器的外壳，可以把网页程序嵌入到壳里面，可以运行在桌面上的一个程序，可以把网页打包成一个在桌面运行的程序，类似于我们电脑中的一些腾讯qq，网易音乐等,在学习过程中，参考了一个文档，手把手…，然后跟着文档走了一遍，手把手搭建一个开发环境:
一 、 搭建node环境，安装node.js

1,node官网，进去后选择稳定版node.js,

2,下载完成后双击运行进行安装，安装过程基本直接“NEXT”就可以了（全部采用默认方式安装）。（windows的安装msi文件在过程中会直接添加path的系统变量，变量值是你的安装路径，例如“C:Program Filesnodejs”）。

3,安装完成后可以使用cmd（win+r然后输入cmd进入 ）测试下是否安装成功。方法：在cmd下输入node -v，出现下图版本提示就是完成了NodeJS的安装。

4、npm的安装。由于新版的NodeJS已经集成了npm，所以之前npm也一并安装好了。同样可以使用cmd命令行输入”npm -v”来测试是否成功安装。如下图，出现版本提示便OK了。

5、常规NodeJS的搭建到现在为止已经完成了，急不及待的话你可以在”cmd“输入”node“进入node开发模式下，输入你的NodeJS第一句：”hello world“ - 输入：console.log(‘hello world’)。

二、搭建vue开发环境

1.安装淘宝npm镜像
由于在国内使用npm是非常慢的，所以在这里我们推荐使用淘宝npm镜像，使用淘宝的cnpm命令管理工具可以代替默认的npm管理工具：
npm install -g cnpm --registry=https://registry.npm.taobao.org；

2. 淘宝镜像安装成功之后，我们就可以全局vue-cli脚手架
   cnpm install --global vue-cli 然后回车
   验证是否安装成功，在命令输入 vue
   出来vue的信息，及说明安装成功；

三、新建vue项目
初始化命令： vue init simulatedgreg/electron-vue 项目名称
electrondemo03是自定义的文件名，
? Application Name (electrondemo03) electrondemo3
后面的electrondemo3是项目的名字，然后可以一路回车

vue init simulatedgreg/electron-vue electrondemo03
 

进入刚创建的vue项目

cd electrondemo03/

看一下package.json中的运行命令，运行项目：
可以直接在命令行中查看

cat package.json
 

npm run dev
 

这是缺少包
直接： npm install

下载包完成后，可以再次运行：


显示的页面如下：