一：手动创建
// 新建项目文件夹
mkdir my-app
// 进入项目文件夹
cd my-app
// 创建package.json文件
npm init -y || npm init --yes
// 新建main.js文件
echo>main.js
// 新建index.html文件
echo>index.html
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
hello electron
</body>
</html>
// main.js
const path = require('path')
const {app, BrowserWindow} = require('electron')
let mainWindow = null
function createWindow(){
mainWindow = new BrowserWindow({
width: 1080,
minWidth: 680,
height: 840,
webPreferences:{ // 渲染进程使用node模块【require】
nodeIntegration:true
}
})
// mainWindow.loadFile('./index.html')
mainWindow.loadURL(path.join('file://', __dirname, '/index.html'))
mainWindow.webContents.openDevTools()
mainWindow.on('closed', () => {
mainWindow = null
})
}
app.on('ready', () => {
createWindow()
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (mainWindow === null) {
createWindow()
}
})
// package.json
{
"name": "my-app",
"version": "1.0.0",
"description": "",
"main": "main.js", // 这里
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ." // 这里
},
"keywords": [],
"author": "",
"license": "ISC"
}
二：克隆官方的快速启动项目
# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start
三：使用electron-forge快速生成
// 安装electron-forge(全局安装)
npm i electron-forge -g
// 查看是否安装成功
electron-forge --version
// 创建项目
electron-forge init my-app
// 进入项目文件夹
cd my-app2
// 启动运行：不需要npm i，因为创建项目已经install了
npm start
四：使用npx快速创建
// node版本>5.2会和node一起安装，可以直接使用
// 检测是否有npx
npx -v
// 如果没有可以手动安装
npm i npx -g
// 创建electron项目
npx create-electron-app my-app
// 进入项目文件夹
cd my-app
// 运行项目：具体的指令看package.json中的script配置项 || electron .
npm start
网友评论