近期準備更新兩篇文章，一直沒有時間來寫。一篇是想說說如何使用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。
