第一步：安装nodejs
1、windows下的NodeJS安装是比较方便的（v0.6.0版本之后，支持windows native），只需要登陆官网（http://nodejs.org/），便可以看到下载页面。
macos 下也可以下载直接安装官网（https://nodejs.org/en/）最好下载LTS版本
这个是nodejs官网
2、windows下载完成后双击运行进行安装，安装过程基本直接“NEXT”就可以了（全部采用默认方式安装）。（windows的安装msi文件在过程中会直接添加path的系统变量，变量值是你的安装路径，例如“C:Program Files odejs”）。
macos 下也是点击安装，安装过程基本直接“NEXT”就可以了。
3、windows安装完成后可以使用cmd（win+r然后输入cmd进入 ）测试下是否安装成功。方法：在cmd下输入node -v，出现下图版本提示就是完成了NodeJS的安装。
图2
macos 下打开终端输入 node -v 及npm -v 出现下图版本提示就是完成了NodeJS的安装。
图3
4、npm的安装。由于新版的NodeJS已经集成了npm，所以之前npm也一并安装好了。同样可以使用cmd命令行输入”npm -v”来测试是否成功安装。如上图，出现版本提示便OK了。
常规NodeJS的搭建到现在为止已经完成了
第二步:搭建vue开发环境
我们就可以全局vue-cli脚手架，输入命令：npm install--global vue-cli 回车；验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功；
图4
第三步：搭建vue项目
使用命令创建项目，一步步选择之后开始等等项目创建完成
在命令行输入：vue init webpack myapp 其中“myapp”是我的项目名。
图5
完成后如下：
图6
图7
执行命令，出现如下效果说明项目已经运行成功：
npm run dev
图8
执行生成命令：
npm run build
注意： 生成的时候一定要修改index.js 中的生成路径，否则后面程序运行打包页面会显示空白，找不到路径
图9
出现如下效果
图10
项目下回多出一个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
至此全部完成。
网友评论