第一步：安裝nodejs
1、windows下的NodeJS安裝是比較方便的（v0.6.0版本之后，支持windows native），只需要登陸官網（http://nodejs.org/），便可以看到下載頁面。?
macos 下也可以下載直接安裝官網（https://nodejs.org/en/）最好下載LTS版本
2、windows下載完成后雙擊運行進行安裝，安裝過程基本直接“NEXT”就可以了（全部采用默認方式安裝）。（windows的安裝msi文件在過程中會直接添加path的系統(tǒng)變量，變量值是你的安裝路徑，例如“C:Program Files odejs”）。
macos 下也是點擊安裝，安裝過程基本直接“NEXT”就可以了。
3、windows安裝完成后可以使用cmd（win+r然后輸入cmd進入 ）測試下是否安裝成功。方法：在cmd下輸入node -v，出現下圖版本提示就是完成了NodeJS的安裝。?
macos 下打開終端輸入?node -v 及npm -v?出現下圖版本提示就是完成了NodeJS的安裝。
4、npm的安裝。由于新版的NodeJS已經集成了npm，所以之前npm也一并安裝好了。同樣可以使用cmd命令行輸入”npm -v”來測試是否成功安裝。如上圖，出現版本提示便OK了。?
常規(guī)NodeJS的搭建到現在為止已經完成了
第二步:搭建vue開發(fā)環(huán)境
我們就可以全局vue-cli腳手架，輸入命令：npm install--global vue-cli ?回車；驗證是否安裝成功，在命令輸入vue，出來vue的信息，及說明安裝成功；
第三步：搭建vue項目
?使用命令創(chuàng)建項目，一步步選擇之后開始等等項目創(chuàng)建完成
在命令行輸入：vue init webpack myapp? 其中“myapp”是我的項目名。
完成后如下：
執(zhí)行命令，出現如下效果說明項目已經運行成功：
npm run dev
執(zhí)行生成命令：
npm run build
?注意： 生成的時候一定要修改index.js 中的生成路徑，否則后面程序運行打包頁面會顯示空白，找不到路徑
出現如下效果
項目下回多出一個dist的文件夾，里面就你打包好的東西
接下來一切操作都在dist文件夾目錄下。
第四步：安裝Electron
執(zhí)行命令：
npm install electron
安裝成功后執(zhí)行：electron -v 查看一下是否安裝成功
第五步：創(chuàng)建主程序的入口（main.js）,及相關配置 package.json
在dist文件夾內創(chuàng)建main.js文件及package.json 文件
main.js內容如下：
const {app,BrowserWindow} = require('electron'); //引入electron
let win;
let windowConfig = {
width:800,
? height:600,
? icon:"icon.png",
}; //窗口配置程序運行窗口的大小
function createWindow() {
win =new BrowserWindow(windowConfig); //創(chuàng)建一個窗口
? 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": "myapp",
? "productName": "myapp",
? "author": "cdl",
? "version": "1.0.0",
? "main": "main.js",
? "description": "myapp",
? "scripts": {
"pack": "electron-builder --dir",
? ? "dist": "electron-builder",
? ? "postinstall": "electron-builder install-app-deps"
? },
? "build": {
"directories": {
"output": "build"
? ? },
? ? "electronVersion": "20.1.2",
? ? "win": {
"requestedExecutionLevel": "highestAvailable",
? ? ? "target": [
{
"target": "nsis",
? ? ? ? ? "arch": [
"x64"
? ? ? ? ? ]
}
]
},
? ? "appId": "com.app.myapp",
? ? "artifactName": "myapp.${ext}",
? ? "extraResources": [],
? ? "nsis": {
"artifactName": "myapp.${ext}"
? ? },
? ? "publish": [
{
"provider": "generic",
? ? ? ? "url": "myapp"
? ? ? }
]
},
? "dependencies": {
"core-js": "^2.4.1",
? ? "electron-package": "^0.1.0",
? ? "electron-packager": "^12.1.0",
? ? "electron-updater": "^4.6.5",
? ? "fs-extra": "^4.0.1",
? ? "install.js": "^1.0.1",
? ? "moment": "^2.18.1",
? ? "moment-es6": "^1.0.0"
? },
? "license": "ISC",
? "devDependencies": {
"electron-builder": "^23.3.3"
? }
}
package.json更多配置可查看官方文檔：https://www.electron.build/configuration/configuration
在你的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文件夾內-執(zhí)行命令：?electron .
成功后效果如下：
出現如上效果說明你已經成功了。
第六步：打包成軟件包
在dist文件夾內-執(zhí)行命令
npm install electron-builder
npm install electron-package
npm install electron-updater
執(zhí)行打包命令：
electron-bulider 或?執(zhí)行命令：npm run dist
如出現：
這是得再運行下：npm install electron --save-dev
后再npm run dist
至此全部完成。
