1.現如今前端框架數不勝數，尤其是angular、vue吸引一大批前端開發者，在這個高新技術快速崛起的時代，自然少不了各種框架的結合使用。接下來是介紹electron+vue的結合使用。
2.Electron是什么？？
對於我來說Electron相當於一個瀏覽器的外殼，可以把網頁程序嵌入到殼里面，可以運行在桌面上的一個程序，可以把網頁打包成一個在桌面運行的程序，通俗來說就是軟件，比如像QQ、優酷、網易音樂等等。功能的強大超出你的想象，可以構建跨平台桌面程序，本身支持node.js，可以使用node.js的一些模塊。想要深入了解可以查看官網的詳細介紹。
Electron官網：https://electronjs.org/
3.Electron+vue的聯合使用
有vue基礎跟nodejs基礎的開發人員使用electron那就更順風順水了，沒有node基礎的，有vue或者angular基礎的也可以學習，學起來可能會吃力些，不過也沒關系，很多東西有大神已經封裝好了，直接使用就行。
接下來教你手把手搭建一個electron+vue的開發環境。
第一步：安裝nodejs
windows下的NodeJS安裝是比較方便的（v0.6.0版本之后，支持windows native），只需要登陸官網（http://nodejs.org/），便可以看到下載頁面。
2、下載完成后雙擊運行進行安裝，安裝過程基本直接“NEXT”就可以了（全部采用默認方式安裝）。（windows的安裝msi文件在過程中會直接添加path的系統變量，變量值是你的安裝路徑，例如“C:\Program Files\nodejs”）。
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；
淘寶鏡像安裝成功之后，我們就可以全局vue-cli腳手架，輸入命令：cnpm install --global vue-cli 回車；驗證是否安裝成功，在命令輸入vue，出來vue的信息，及說明安裝成功；
第三步：搭建vue項目
使用命令創建項目，一步步選擇之后開始等等項目創建完成
vue init webpack demo
完成后如下：
成功之后修改啟動項，打開demo>config>index.js,具體修改如下：
執行命令，出現如下效果說明項目已經運行成功：
npm run dev
執行生成命令：
npm run build
注意： 生成的時候一定要修改index.js 中的生成路徑，否則后面程序運行打包頁面會顯示空白，找不到路徑
出現如下效果
項目下回多出一個dist的文件夾，里面就你打包好的東西
接下來一切操作都在dist文件夾目錄下。
第四步：安裝Electron
執行命令：
npm install electron
第五步：創建主程序的入口（main.js）,及相關配置 package.json
在dist文件夾內創建main.js文件及package.json 文件
文件內容如下：
main.js
// const {
// app,
// BrowserWindow,
// globalShortcut,
// ipcMain
// } = require('electron')
// let win;
// let windowConfig = {
// fullscreen: true,
// width: 600,
// height: 600
// };
// const {
// autoUpdater
// } = require('electron-updater');
// function createWindow() {
// win = new BrowserWindow(windowConfig);
// win.loadURL(`file://${__dirname}/index.html`);
// app.setApplicationMenu(null); //關閉菜單欄
// // 注冊一個 'CommandOrControl+X' 的全局快捷鍵
// globalShortcut.register('CommandOrControl+Alt+K', () => {
// win.webContents.openDevTools(); //開啟調試工具
// });
// win.on('close', () => {
// //回收BrowserWindow對象
// win = null;
// });
// win.on('resize', () => {
// win.reload();
// })
// }
// app.on('ready', createWindow);
// app.on('window-all-closed', () => {
// app.quit();
// });
// app.on('activate', () => {
// if (win == null) {
// createWindow();
// }
// });
// // 檢測更新，在你想要檢查更新的時候執行，renderer事件觸發后的操作自行編寫
// ! function updateHandle() {
// let message = {
// error: '檢查更新出錯',
// checking: '正在檢查更新……',
// updateAva: '檢測到新版本，正在下載……',
// updateNotAva: '現在使用的就是最新版本，不用更新',
// };
// const uploadUrl = "https://www.cnblogs.com/jiangxifanzhouyudu/p/9517651.html"; // 下載地址，不加后面的**.exe
// autoUpdater.setFeedURL(uploadUrl);
// autoUpdater.on('error', function(error) {
// console.log(autoUpdater.error);
// sendUpdateMessage(message.error)
// });
// autoUpdater.on('checking-for-update', function() {
// sendUpdateMessage(message.checking)
// });
// autoUpdater.on('update-available', function(info) {
// sendUpdateMessage(message.updateAva)
// });
// autoUpdater.on('update-not-available', function(info) {
// sendUpdateMessage(message.updateNotAva)
// });
// // 更新下載進度事件
// autoUpdater.on('download-progress', function(progressObj) {
// win.webContents.send('downloadProgress', progressObj)
// });
// autoUpdater.on('update-downloaded', function(event, releaseNotes, releaseName, releaseDate, updateUrl,
// quitAndUpdate) {
// ipcMain.on('isUpdateNow', (e, arg) => {
// //some code here to handle event
// autoUpdater.quitAndInstall();
// });
// win.webContents.send('isUpdateNow')
// });
// ipcMain.on("checkForUpdate", () => {
// //執行自動更新檢查
// autoUpdater.checkForUpdates();
// })
// }();
// // 通過main進程發送事件給renderer進程，提示更新信息
// function sendUpdateMessage(text) {
// win.webContents.send('message', text)
// }
const {
app,
BrowserWindow
} = require('electron'); //引入electron
let win;
let windowConfig = {
width: 800,
height: 600
}; //窗口配置程序運行窗口的大小
function createWindow() {
win = new BrowserWindow(windowConfig); //創建一個窗口
win.loadURL(`file://${__dirname}/index.html`); //在窗口內要展示的內容index.html 就是打包生成的index.html
win.webContents.openDevTools(); //開啟調試工具
win.on('close', () => {
//回收BrowserWindow對象
win = null;
});
win.on('resize', () => {
win.reload();
})
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
app.quit();
});
app.on('activate', () => {
if (win == null) {
createWindow();
}
});
package.json
{
"name": "cang",
"productName": "cang",
"author": "cang",
"version": "1.1.1",
"main": "main.js",
"description": "cang",
"scripts": {
"pack": "electron-builder --dir",
"dist": "electron-builder",
"postinstall": "electron-builder install-app-deps"
},
"build": {
"electronVersion": "1.8.4",
"win": {
"requestedExecutionLevel": "highestAvailable",
"target": [
{
"target": "nsis",
"arch": [
"x64"
]
}
]
},
"appId": "cang",
"artifactName": "cang-version−{arch}.${ext}",
"nsis": {
"artifactName": "cang-version−{arch}.${ext}"
},
"extraResources": [
{
"from": "",
"to": "app-server",
"filter": [
"**/*"
]
}
],
"publish": [
{
"provider": "generic",
"url": "cang"
}
]
},
"dependencies": {
"core-js": "^2.4.1",
"electron-updater": "^4.0.0",
"fs-extra": "^4.0.1",
"install.js": "^1.0.1",
"moment": "^2.18.1",
"moment-es6": "^1.0.0",
"electron-packager": "^12.1.0"
},
"devDependencies": {},
"license": "ISC"
}
在你的vue項目里面App.vue生命周期里面新增如下代碼：這是自動檢測更新
mounted: function () {
if (window.require) {
let ipc = window.require('electron').ipcRenderer;
ipc.send("checkForUpdate");
ipc.on("message", (event, text) => {
this.tips = text;
console.log('message1',this.tips)
});
ipc.on("downloadProgress", (event, progressObj)=> {
this.downloadPercent = progressObj.percent || 0;
console.log('message2',this.downloadPercent)
});
ipc.on("isUpdateNow", () => {
ipc.send("isUpdateNow");
});
}
},
現在萬事俱備只欠東風，
在dist文件夾內-執行命令： electron .
成功后效果如下：
出現如上效果說明你已經成功了。
第五步：打包成軟件包
在dist文件夾內-執行命令
npm install electron-builder npm install electron-package
npm install electron-updater
執行打包命令：
electron-bulider 或 執行命令：npm run dist
electron-builder打包及問題:https://www.yuque.com/casually/soiwk1/gz1p5c#5onTa
以上就是打包成功的效果，demo-1.0.4.exe 就是一個軟件包，可以直接安裝到系統上，不同的操作系統可以打包成不同的安裝包。