近期准备更新两篇文章，一直没有时间来写。一篇是想说说如何使用Electron将Vue项目打包成桌面应用。另一篇是关于Vue框架input组件的个性使用，包括键盘的监听，脱离鼠标操作等等，这个暂时搁置，看看周末有没有时间写写吧。
今天主要说一下如何将使用vue-cli脚手架快速搭建的项目，打包成PC端的桌面应用。这里我使用的工具是electron官方文档
顺便了解一下Electron。Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。 你可以把它看作一个专注于桌面应用的 Node. js 的变体，而不是 Web 服务器。这不意味着 Electron 是某个图形用户界面（GUI）库的 JavaScript 版本。 相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。
开始之前，可以先了解一下官方文档里打造第一个Electron应用 --- electron-quick-start 这是一个最基本的Electron应用demo。从GitHub下载下来看看electron-quick-start
假设已经使用vue-cli快速构建了一个项目，如果还没有的话可以看看基于vue-cli快速构建，这篇简书描述得很细致。
1.打开终端进入Vue项目的目录
$npm run build 运行后项目内会出现dist文件夹
2.更改路径
在项目config - index.js - build: - assetsPublicPath 修改为相对路径 ./
3.Vue 中引入Electron,首先在vue项目的package.json中加入Electron的依赖，
$npm install electron --save-dev //添加依赖
$npm install electron-packager --save-dev //这个是打成exe文件的插件
4.把electron-quick-start项目中的main.js复制到新建vue的build文件中，并改个名字electron.js。路径修改为下面的截图一样：./dist/index.html
5.同时复制一份electron.js 到dist文件夹下。注意这时的路径就不是./dist/index.html，直接改成index.html即可
6.在package.json文件中增加一条指令"electron_dev": "npm run build && electron build/electron.js"，用来启动electron，如图：
7.复制一份package.json文件到dist文件夹下。
8.修改dist/package.json main入口为："main": "electron.js",
先说明一下，electron_dev 就是用来启动electron的，在此之前我们一定要确保项目当中已经有构建好的静态资源文件，因此 在运行 electron build/electron.js 之前，首先运行 npm run build。
经过这样的处理，在命令行中，运行 npm run electron_dev之后，就会将自己的Vue项目显示成桌面应用。
至此，这还没算打包，下面接着说如何打包成应用程序。这里都是手动配置electron打包，实际上使用vue-electron脚手架更便捷，有时间再来说。
9.在package.json文件为之前下载好的electron-packager，再手动增加一条启动命令"electron_build": "electron-packager ./dist/ --arch=x64 --overwrite"。注意：dist文件内的package.json也要加上这条指令。
其实这条指令有很多参数的，包括打包的平台，应用图标等等，我只是省略了都没写，使用默认。
10.$npm run electron_build 执行后即可在项目文件夹内看到打包好的桌面应用。
最后需要提一下，我使用的是Mac 所以打包出来的应用是供Mac运行，如果想要运行在Windows上的话，如果不怕费事可以重新按照步骤重来一遍。当然也可以把压缩包传到Windows电脑上，如果传压缩包切记要重新安装依赖，即把node_modules文件删除，然后cmd 命令 输入 npm install 重新生成node_modules依赖。最后再输入命令npm run electron_build打包即可出现.exe可运行程序。
有机会再说说vue-electron。
