每次創(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 官方提供的腳手架工具抖坪,通過一條簡(jiǎn)單的命令,開發(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)目(無需全局安裝):
npx create-electron-app my-app
or
使用--template=webpack
來選擇特定模版:npx create-electron-app my-electron-app --template=webpack ```
- 進(jìn)入項(xiàng)目目錄并啟動(dòng):
cd my-app npm start
-
方法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埋合,就不用下一行來 # 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è)腳本文件