每次创建electron项目,都要手动创建main.js
,index.html
文件,再copy内容,实在太麻烦。
方法1: 使用
create-electron-app
工具,快速创建项目(推荐)
:
create-electron-app 是一个用于快速生成 Electron 应用模板的工具。
它是由 Electron 官方提供的脚手架工具,通过一条简单的命令,开发者可以快速创建一个包含 Electron Forge 支持的标准化 Electron 应用项目。
这将生成一个完整的 Electron 项目,包括入口文件、index.html 和基础配置。
- 直接使用 npx 命令创建项目(无需全局安装):
npx create-electron-app my-app
or
使用--template=webpack
来选择特定模版:npx create-electron-app my-electron-app --template=webpack ```
- 进入项目目录并启动:
cd my-app npm start
-
方法2: 使用脚本自动生成项目文件:
- 创建一个脚本文件
create-electron-project.sh
:#!/bin/bash # 项目名称 PROJECT_NAME=$1 # 检查是否提供项目名称 if [ -z "$PROJECT_NAME" ]; then echo "Usage: ./create-electron-project.sh <project-name>" exit 1 fi # 创建项目目录 mkdir $PROJECT_NAME && cd $PROJECT_NAME # 初始化 package.json npm init -y # 安装 Electron # 全局安装了Electron,就不用下一行来 # npm install --save-dev electron # 创建主文件 cat > main.js <<EOL const { app, BrowserWindow } = require('electron'); let mainWindow; app.whenReady().then(() => { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, }, }); mainWindow.loadFile('index.html'); }); app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); EOL # 创建 HTML 文件 cat > index.html <<EOL <!DOCTYPE html> <html> <head> <title>$PROJECT_NAME</title> </head> <body> <h1>Welcome to $PROJECT_NAME!</h1> </body> </html> EOL echo "Project $PROJECT_NAME created successfully!"
- 赋予执行权限:
chmod +x create-electron-project.sh
- 使用脚本生成项目:
./create-electron-project.sh my-electron-app
- 进入生成的项目 并运行:
cd my-electron-app electron .
- 创建一个脚本文件