第一步：安装nodejs
1、windows下的NodeJS安装是比较方便的（v0.6.0版本之后，支持windows native），只需要登陆官网（http://nodejs.org/），便可以看到下载页面。
macos 下也可以下载直接安装官网（https://nodejs.org/en/）最好下载LTS版本
2、windows下载完成后双击运行进行安装，安装过程基本直接“NEXT”就可以了（全部采用默认方式安装）。（windows的安装msi文件在过程中会直接添加path的系统变量，变量值是你的安装路径，例如“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了。
常规NodeJS的搭建到现在为止已经完成了
第二步:搭建vue开发环境
我们就可以全局vue-cli脚手架，输入命令：npm install--global vue-cli 回车；验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功；
第三步：搭建vue项目
使用命令创建项目，一步步选择之后开始等等项目创建完成
在命令行输入：vue init webpack myapp 其中“myapp”是我的项目名。
完成后如下：
执行命令，出现如下效果说明项目已经运行成功：
npm run dev
执行生成命令：
npm run build
注意： 生成的时候一定要修改index.js 中的生成路径，否则后面程序运行打包页面会显示空白，找不到路径
出现如下效果
项目下回多出一个dist的文件夹，里面就你打包好的东西
接下来一切操作都在dist文件夹目录下。
第四步：安装Electron
执行命令：
npm install electron
安装成功后执行：electron -v 查看一下是否安装成功
第五步：创建主程序的入口（main.js）,及相关配置 package.json
在dist文件夹内创建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); //创建一个窗口
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文件夹内-执行命令： electron .
成功后效果如下：
出现如上效果说明你已经成功了。
第六步：打包成软件包
在dist文件夹内-执行命令
npm install electron-builder
npm install electron-package
npm install electron-updater
执行打包命令：
electron-bulider 或 执行命令：npm run dist
如出现：
这是得再运行下：npm install electron --save-dev
后再npm run dist
至此全部完成。
