简单创建一个electron项目
-
electron中文教程:https://www.w3cschool.cn/electronmanual/p9al1qkx.html
项目目录:
安装electron
npm install electron@4.2.12 --save-dev
package.json
{ "name": "electronTest", "version": "1.0.0", "description": "", "main": "main.js", // 项目入口 不指定默认为index.js "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "serve": "electron ." //启动命令 }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "electron": "^4.2.12" } }
main.js
const { app, BrowserWindow } = require('electron') // 保持一个对于 window 对象的全局引用,不然,当 JavaScript 被 GC, // window 会被自动地关闭 var mainWindow = null; // 当所有窗口被关闭了,退出。 app.on('window-all-closed', function() { // 在 OS X 上,通常用户在明确地按下 Cmd + Q 之前 // 应用会保持活动状态 if (process.platform != 'darwin') { app.quit(); } }); // 当 Electron 完成了初始化并且准备创建浏览器窗口的时候 // 这个方法就被调用 app.on('ready', function() { // 创建浏览器窗口。 mainWindow = new BrowserWindow({width: 800, height: 600}); // 加载应用的 index.html mainWindow.loadURL('file://' + __dirname + '/index.html'); // 打开开发工具 mainWindow.openDevTools(); // 当 window 被关闭,这个事件会被发出 mainWindow.on('closed', function() { // 取消引用 window 对象,如果你的应用支持多窗口的话, // 通常会把多个 window 对象存放在一个数组里面, // 但这次不是。 mainWindow = null; }); });
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Hello World!</h1> We are using io.js <script>document.write(process.version)</script> and Electron <script>document.write(process.versions['electron'])</script>. </body> </html>
启动: npm run serve
-
分类:
electron-vue
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
2019-01-04 HTML5 之 FileReader(图片上传)
2019-01-04 vue中watch的详细用法