近期準(zhǔn)備更新兩篇文章丈探，一直沒有時(shí)間來寫尖奔。一篇是想說說如何使用Electron將Vue項(xiàng)目打包成桌面應(yīng)用鹊杖。另一篇是關(guān)于Vue框架input組件的個(gè)性使用扇丛，包括鍵盤的監(jiān)聽筒严，脫離鼠標(biāo)操作等等丹泉，這個(gè)暫時(shí)擱置，看看周末有沒有時(shí)間寫寫吧鸭蛙。
今天主要說一下如何將使用vue-cli腳手架快速搭建的項(xiàng)目嘀掸，打包成PC端的桌面應(yīng)用。這里我使用的工具是electron官方文檔
順便了解一下Electron规惰。Electron 可以讓你使用純 JavaScript 調(diào)用豐富的原生(操作系統(tǒng)) APIs 來創(chuàng)造桌面應(yīng)用睬塌。 你可以把它看作一個(gè)專注于桌面應(yīng)用的 Node. js 的變體，而不是 Web 服務(wù)器歇万。這不意味著 Electron 是某個(gè)圖形用戶界面（GUI）庫(kù)的 JavaScript 版本揩晴。 相反，Electron 使用 web 頁(yè)面作為它的 GUI贪磺，所以你能把它看作成一個(gè)被 JavaScript 控制的硫兰，精簡(jiǎn)版的 Chromium 瀏覽器。??????
開始之前寒锚，可以先了解一下官方文檔里打造第一個(gè)Electron應(yīng)用 --- electron-quick-start 這是一個(gè)最基本的Electron應(yīng)用demo劫映。從GitHub下載下來看看electron-quick-start
假設(shè)已經(jīng)使用vue-cli快速構(gòu)建了一個(gè)項(xiàng)目违孝，如果還沒有的話可以看看基于vue-cli快速構(gòu)建，這篇簡(jiǎn)書描述得很細(xì)致泳赋。
1.打開終端進(jìn)入Vue項(xiàng)目的目錄
$npm run build? 運(yùn)行后項(xiàng)目?jī)?nèi)會(huì)出現(xiàn)dist文件夾
2.更改路徑
在項(xiàng)目config - index.js - build: - assetsPublicPath? 修改為相對(duì)路徑 ./
3.Vue 中引入Electron,首先在vue項(xiàng)目的package.json中加入Electron的依賴雌桑，
$npm install electron --save-dev //添加依賴
$npm install electron-packager --save-dev //這個(gè)是打成exe文件的插件
4.把electron-quick-start項(xiàng)目中的main.js復(fù)制到新建vue的build文件中，并改個(gè)名字electron.js祖今。路徑修改為下面的截圖一樣：./dist/index.html
5.同時(shí)復(fù)制一份electron.js 到dist文件夾下校坑。注意這時(shí)的路徑就不是./dist/index.html，直接改成index.html即可
6.在package.json文件中增加一條指令"electron_dev": "npm run build && electron build/electron.js"千诬，用來啟動(dòng)electron耍目，如圖：
7.復(fù)制一份package.json文件到dist文件夾下。
8.修改dist/package.json main入口為："main": "electron.js",
先說明一下徐绑，electron_dev?就是用來啟動(dòng)electron的邪驮，在此之前我們一定要確保項(xiàng)目當(dāng)中已經(jīng)有構(gòu)建好的靜態(tài)資源文件，因此 在運(yùn)行?electron build/electron.js?之前傲茄，首先運(yùn)行?npm run build耕捞。
經(jīng)過這樣的處理，在命令行中烫幕，運(yùn)行?npm run electron_dev之后俺抽，就會(huì)將自己的Vue項(xiàng)目顯示成桌面應(yīng)用。
至此较曼，這還沒算打包磷斧，下面接著說如何打包成應(yīng)用程序。這里都是手動(dòng)配置electron打包捷犹，實(shí)際上使用vue-electron腳手架更便捷弛饭，有時(shí)間再來說。
9.在package.json文件為之前下載好的electron-packager萍歉，再手動(dòng)增加一條啟動(dòng)命令"electron_build": "electron-packager ./dist/ --arch=x64 --overwrite"侣颂。注意：dist文件內(nèi)的package.json也要加上這條指令。
其實(shí)這條指令有很多參數(shù)的枪孩，包括打包的平臺(tái)憔晒，應(yīng)用圖標(biāo)等等，我只是省略了都沒寫蔑舞，使用默認(rèn)拒担。
10.$npm run electron_build? 執(zhí)行后即可在項(xiàng)目文件夾內(nèi)看到打包好的桌面應(yīng)用。
最后需要提一下攻询，我使用的是Mac 所以打包出來的應(yīng)用是供Mac運(yùn)行从撼，如果想要運(yùn)行在Windows上的話，如果不怕費(fèi)事可以重新按照步驟重來一遍钧栖。當(dāng)然也可以把壓縮包傳到Windows電腦上低零，如果傳壓縮包切記要重新安裝依賴婆翔，即把node_modules文件刪除，然后cmd 命令 輸入 npm install? 重新生成node_modules依賴掏婶。最后再輸入命令npm run?electron_build打包即可出現(xiàn).exe可運(yùn)行程序啃奴。
有機(jī)會(huì)再說說vue-electron。
