每次創(chuàng)建electron項(xiàng)目,都要手動(dòng)創(chuàng)建main.js,index.html文件,再copy內(nèi)容,實(shí)在太麻煩。
方法1: 使用
create-electron-app工具,快速創(chuàng)建項(xiàng)目(推薦):
create-electron-app 是一個(gè)用于快速生成 Electron 應(yīng)用模板的工具。
它是由 Electron 官方提供的腳手架工具,通過(guò)一條簡(jiǎn)單的命令,開(kāi)發(fā)者可以快速創(chuàng)建一個(gè)包含 Electron Forge 支持的標(biāo)準(zhǔn)化 Electron 應(yīng)用項(xiàng)目。
這將生成一個(gè)完整的 Electron 項(xiàng)目,包括入口文件、index.html 和基礎(chǔ)配置。
- 直接使用 npx 命令創(chuàng)建項(xiàng)目(無(wú)需全局安裝):
npx create-electron-app my-appor使用--template=webpack來(lái)選擇特定模版:npx create-electron-app my-electron-app --template=webpack ``` - 進(jìn)入項(xiàng)目目錄并啟動(dòng):
cd my-app npm start -
編寫一個(gè)腳本,自動(dòng)創(chuàng)建項(xiàng)目目錄、生成入口文件和配置文件。方法2: 使用腳本自動(dòng)生成項(xiàng)目文件:
- 創(chuàng)建一個(gè)腳本文件
create-electron-project.sh:#!/bin/bash # 項(xiàng)目名稱 PROJECT_NAME=$1 # 檢查是否提供項(xiàng)目名稱 if [ -z "$PROJECT_NAME" ]; then echo "Usage: ./create-electron-project.sh <project-name>" exit 1 fi # 創(chuàng)建項(xiàng)目目錄 mkdir $PROJECT_NAME && cd $PROJECT_NAME # 初始化 package.json npm init -y # 安裝 Electron # 全局安裝了Electron,就不用下一行來(lái) # npm install --save-dev electron # 創(chuàng)建主文件 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 # 創(chuàng)建 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!" - 賦予執(zhí)行權(quán)限:
chmod +x create-electron-project.sh - 使用腳本生成項(xiàng)目:
./create-electron-project.sh my-electron-app - 進(jìn)入生成的項(xiàng)目 并運(yùn)行:
cd my-electron-app electron .
- 創(chuàng)建一個(gè)腳本文件