VSCode 创建 Electron项目
一切都从 hello world 开始
1.创建 package.json 并编写如下信息
{ "name": "your-app", "version": "0.1.0", "main": "main.js", "scripts": { "start": "electron ." } }
2.安装依赖
npm install --save-dev electron
这里的等待时间是不确定的 根据网络环境所限制(fan qiang 更快)
3.创建入口文件
main.js
const { app, BrowserWindow } = require('electron') function createWindow () { // 创建浏览器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // 并且为你的应用加载index.html win.loadFile('index.html') // 打开开发者工具 win.webContents.openDevTools() } // This method will be called when Electron has finished // initialization and is ready to create browser windows. // 部分 API 在 ready 事件触发后才能使用。 app.whenReady().then(createWindow) // Quit when all windows are closed. app.on('window-all-closed', () => { // 在 macOS 上,除非用户用 Cmd + Q 确定地退出, // 否则绝大部分应用及其菜单栏会保持激活。 if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { // 在macOS上,当单击dock图标并且没有其他窗口打开时, // 通常在应用程序中重新创建一个窗口。 if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) // In this file you can include the rest of your app's specific main process // code. 也可以拆分成几个文件,然后用 require 导入。
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag --> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> </head> <body> <h1>Hello World!</h1> </body> </html>
4.运行
npm start
