使用脚手架创建electron
mkdir my-electron-app && cd my-electron-app
npm init
//将 electron 包安装到应用的开发依赖中。
npm install --save-dev electron
//package.json
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "demo",
"main": "index.js", //electron 入口文件
"scripts": {
"test": "start",
"start": "electron ."
},
"author": "wz",
"license": "MIT",
"devDependencies": {
"electron": "^15.1.1"
}
}
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</body>
</html>
// index.js
const { app, BrowserWindow } = require('electron')
const path = require('path')
app.whenReady().then(() => {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('index.html') //需要加载的html
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
//preload.js
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${dependency}-version`, process.versions[dependency])
}
})
start 命令能让您在开发模式下打开您的应用
npm start
成功启动
推荐
下面推荐electron的项目模板,开发者可以基于此模板快速构建electron的项目
-
快速构建 react体系的electron的项目
模板名:electron-react-boilerplate
地址:https://github.com/electron-react-boilerplate/electron-react-boilerplate
结构: react + redux +reactRouter + webpack +react hot loader+ typescript + electron 。 -
快速构建 angular体系的electron的项目
模板名:1. angular-electron
地址:https://github.com/maximegris/angular-electron
结构: angular + webpack + typescript + electron 。
angular +
git clone https://github.com/maximegris/angular-electron.git
npm install -g @angular/cli
cd app/
npm install
- 快速构建 vue体系的electron的项目
electron-vue
地址:https://github.com/SimulatedGREG/electron-vue
地址:https://github.com/electron-vite/electron-vite-vue
快速构建 angular体系的electron的项目 vue + store + router + typescript + vite+ electron 。