Electron快速创建模版

每次创建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 .
      

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容