第一步：安裝nodejs
1、windows下的NodeJS安裝是比較方便的（v0.6.0版本之后，支持windows native），只需要登陸官網(wǎng)（http://nodejs.org/），便可以看到下載頁(yè)面。?
macos 下也可以下載直接安裝官網(wǎng)（https://nodejs.org/en/）最好下載LTS版本
2、windows下載完成后雙擊運(yùn)行進(jìn)行安裝，安裝過(guò)程基本直接“NEXT”就可以了（全部采用默認(rèn)方式安裝）。（windows的安裝msi文件在過(guò)程中會(huì)直接添加path的系統(tǒng)變量，變量值是你的安裝路徑，例如“C:Program Files odejs”）。
macos 下也是點(diǎn)擊安裝，安裝過(guò)程基本直接“NEXT”就可以了。
3、windows安裝完成后可以使用cmd（win+r然后輸入cmd進(jìn)入 ）測(cè)試下是否安裝成功。方法：在cmd下輸入node -v，出現(xiàn)下圖版本提示就是完成了NodeJS的安裝。?
macos 下打開(kāi)終端輸入?node -v 及npm -v?出現(xiàn)下圖版本提示就是完成了NodeJS的安裝。
4、npm的安裝。由于新版的NodeJS已經(jīng)集成了npm，所以之前npm也一并安裝好了。同樣可以使用cmd命令行輸入”npm -v”來(lái)測(cè)試是否成功安裝。如上圖，出現(xiàn)版本提示便OK了。?
常規(guī)NodeJS的搭建到現(xiàn)在為止已經(jīng)完成了
第二步:搭建vue開(kāi)發(fā)環(huán)境
我們就可以全局vue-cli腳手架，輸入命令：npm install--global vue-cli ?回車(chē)；驗(yàn)證是否安裝成功，在命令輸入vue，出來(lái)vue的信息，及說(shuō)明安裝成功；
第三步：搭建vue項(xiàng)目
?使用命令創(chuàng)建項(xiàng)目，一步步選擇之后開(kāi)始等等項(xiàng)目創(chuàng)建完成
在命令行輸入：vue init webpack myapp? 其中“myapp”是我的項(xiàng)目名。
完成后如下：
執(zhí)行命令，出現(xiàn)如下效果說(shuō)明項(xiàng)目已經(jīng)運(yùn)行成功：
npm run dev
執(zhí)行生成命令：
npm run build
?注意： 生成的時(shí)候一定要修改index.js 中的生成路徑，否則后面程序運(yùn)行打包頁(yè)面會(huì)顯示空白，找不到路徑
出現(xiàn)如下效果
項(xiàng)目下回多出一個(gè)dist的文件夾，里面就你打包好的東西
接下來(lái)一切操作都在dist文件夾目錄下。
第四步：安裝Electron
執(zhí)行命令：
npm install electron
安裝成功后執(zhí)行：electron -v 查看一下是否安裝成功
第五步：創(chuàng)建主程序的入口（main.js）,及相關(guān)配置 package.json
在dist文件夾內(nèi)創(chuàng)建main.js文件及package.json 文件
main.js內(nèi)容如下：
const {app,BrowserWindow} = require('electron'); //引入electron
let win;
let windowConfig = {
width:800,
? height:600,
? icon:"icon.png",
}; //窗口配置程序運(yùn)行窗口的大小
function createWindow() {
win =new BrowserWindow(windowConfig); //創(chuàng)建一個(gè)窗口
? win.loadURL(`file://${__dirname}/index.html`); //在窗口內(nèi)要展示的內(nèi)容index.html 就是打包生成的index.html
? win.webContents.openDevTools(); //開(kāi)啟調(diào)試工具
? win.on('close', () => {
//回收BrowserWindow對(duì)象
? ? 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內(nèi)容如下：
{
"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項(xiàng)目里面App.vue生命周期里面新增如下代碼：這是自動(dòng)檢測(cè)更新
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文件夾內(nèi)-執(zhí)行命令：?electron .
成功后效果如下：
出現(xiàn)如上效果說(shuō)明你已經(jīng)成功了。
第六步：打包成軟件包
在dist文件夾內(nèi)-執(zhí)行命令
npm install electron-builder
npm install electron-package
npm install electron-updater
執(zhí)行打包命令：
electron-bulider 或?執(zhí)行命令：npm run dist
如出現(xiàn)：
這是得再運(yùn)行下：npm install electron --save-dev
后再npm run dist
至此全部完成。
