官方教程:https://www.electronjs.org/docs/latest/tutorial/quick-start
环境搭建:1.Electron开发环境搭建
极速体验:
# 克隆这仓库 $ git clone https://github.com/electron/electron-quick-start # 进入仓库 $ cd electron-quick-start # 安装依赖库并运行应用 $ npm install && npm start
自己编写
一、HelloWorld界面编写
1、新建工作目录:F:\study\electron\helloworld
2、使用编辑器(VScode)打开工作目录新建index.html文件
3、编写界面内容
html:5
<!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>HelloWorld</title> </head> <body> HelloWorld </body> </html>
二、编写main.js,引入electron工作
var electron = require('electron') //引入electron组件 var app = electron.app //引入组件app var BrowserWindow = electron.BrowserWindow //窗口引用 var mainWindow = null //申明打开窗口 app.on('ready', () => { //app初始化参数 mainWindow = new BrowserWindow({ windth: 800, height: 800 }) mainWindow.loadFile('index.html') //打开窗口加载的页面 mainWindow.on('close', () => { //窗口关闭时,释放页面 mainWindow = null }) })
三、初始化项目
npm init --yes
四、运行项目
electron .
项目目录结构