Electron
electron 是一个跨平台的桌面应用开发框架,用HTML css js 的技术开发桌面上面可以安装的软件,可以让前端人员用HTML css js 的技术开发跨平台可以安装的桌面软件。
使用electron前的准备工作
- 需要nodejs
- 需要安装git
- 需要有HTML css js 以及nodejs 基础
从 HBuilder X 新建项目 选择element-starter。起项目名称后点击创建,然后静静等待。
创建成功后,点击底部终端小图标,然后 输入: npm run dev 回车。
静静等待,出现webpack: Compiled successfully. 编译成功!然后找到 Project is running at 后面的项目运行地址。
复制url地址,浏览器打开, 到这里打开的是vue项目。
安装Electron (运行起来后就搬家啦,不在HBuilder X 啦,去vs Code打开项目)
npm install electron
// 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
// 输入命令,查看是否安装成功
cnpm
// 使用cnpm安装Electron
cnpm install -g electron
// 查看一下是否安装成功
electron -v
v10.1.5
安装成功后 创建主程序入口(main.js) 和配置文件 package.json
main.js
const {app, BrowserWindow} =require('electron');//引入electron
let win;
let windowConfig = {
width:800,
height:600
};//窗口配置程序运行窗口的大小
function createWindow(){
win = new BrowserWindow(windowConfig);//创建一个窗口
win.loadURL('http://127.0.0.1:8010');//配置成刚刚运行成功的地址!!!
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": "demo",
"productName": "项目名称",
"author": "作者",
"version": "1.0.4",
"main": "./main.js",// 对应刚刚上面的 main.js地址。
"description": "项目描述",
"scripts": {
"dev": "webpack-dev-server --inline --hot --env.dev",
"build": "rimraf dist && webpack -p --progress --hide-modules",
"pack": "electron-builder --dir",
"dist": "electron-builder",
"postinstall": "electron-builder install-app-deps"
},
"build": {
"electronVersion": "1.8.4",
"win": {
"requestedExecutionLevel": "highestAvailable",
"target": [
{
"target": "nsis",
"arch": [
"x64"
]
}
]
},
"appId": "demo",
"artifactName": "demo-${version}-${arch}.${ext}",
"nsis": {
"artifactName": "demo-${version}-${arch}.${ext}"
},
"publish": [
{
"provider": "generic"
}
]
},
"dependencies": {
"babel-preset-es2015": "^6.24.1",
"electron": "^10.1.5",
"element-ui": "^2.3.4",
"vue": "^2.5.16",
"core-js": "^2.4.1"
},
"engines": {
"node": ">=6"
},
"devDependencies": {
"autoprefixer": "^6.6.0",
"babel-core": "^6.24.1",
"babel-loader": "^6.4.0",
"babel-preset-vue-app": "^1.2.0",
"css-loader": "^0.27.0",
"file-loader": "^0.10.1",
"html-webpack-plugin": "^2.24.1",
"postcss-loader": "^1.3.3",
"rimraf": "^2.5.4",
"style-loader": "^0.13.2",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-template-compiler": "^2.5.16",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2"
}
}
配置成功了,接下来运行 : electron .