第一步：安装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
至此全部完成。
