Electron快速創(chuàng)建模版

每次創(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-app
    
    or使用--template=webpack來(lái)選擇特定模版:
    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)目文件:

    編寫一個(gè)腳本,自動(dòng)創(chuà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 .
      

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容