electron-vue项目搭建

Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。 你可以把它看作一个专注于桌面应用的 Node. js 的变体，而不是 Web 服务器。

我们前端使用的VS code就是使用Electron制作的。

这次介绍一个第三方库electron-vue，看名字就知道了，他是electron和vue的结合体，很轻松的就可以把你的vue项目转化为桌面项目。文档：https://simulatedgreg.gitbooks.io/electron-vue/content/en/renderer-process.html

准备工作：
(1)是否安装node
如果不确定自己是否安装了node,可以在命令行工具内执行： node -v （检查一下 版本）；
node下载地址 http://nodejs.cn/download/
(2)是否全局安装vue-cli
命令行执行 : npm install -g vue-cli // 加-g是安装到全局

补充知识：
使用淘宝镜像:

1>.官方网址：http://npm.taobao.org；

2>.安装：npm install cnpm -g --registry=https://registry.npm.taobao.org； 注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；

3>.注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm（以下操作将以cnpm代替npm）。

4> 如何更新npm的方法： 可以使用 npm install -g npm 来更新版本

下面开始讲解项目的实现过程，不过再讲解之前，需要一些准备工作，当然说到vue，node是必不可少的，还有vue的脚手架vue-cli，这两个安装完毕，就可以开始写项目了。

一、首先创建一个electron-vue的项目

			vue init simulatedgreg/electron-vue my-project

二、进入项目目录,npm i 下载依赖

	cd my-project

这里还有一点和vue不太一样，vue在创建的时候就会自动安装依赖，但是electron-vue不会，需要你手动安装依赖

npm i (这里需要说明一下，虽然用cnpm安装会更快，但是这里还是推荐用npm，不然后面可能会出现一些莫名的坑)

安装完成，下方就是electron-vue的目录

.electron-vue：webpack和electron的一些配置

build：项目打包后的文件

src：里面有两个文件夹

main：看过electron的都知道electron项目里有一个main.js的文件，这个文件和main.js是同样的功能
renderer：是vue的代码文件，俺vue的是实现方法写就OK了，这就不用做过多的说明

package.json：这就不需要说了把（会vue的都知道）

三、执行看一下效果

		npm run dev

OK perfect！ 成功运行！

注意点：这是运行electron-vue运行时候的使用的 npm run dev 而不是 npm start

四、试试打包，毕竟是桌面软件，怎么可能没有.exe文件

		npm run build

electron-vue有内置的打包，你只需要执行 npm run build就可以了

每次重新打包前，执行一下npm run build:clean 清楚之前打包的代码，在执行打包。