electron创建工程的三种方式

electron创建工程的三种方式

electron环境搭建

安装 (全局安装 只需要一次)

npm install -g electron   / cnpm install -g electron  (不会cnpm 百度搜cnpm)

electron创建工程的三种方式

一、git克隆electron-quick-start项目

1.cd到对应的项目里面
2、执行下面命令

// 克隆示例项目的仓库
git clone https://github.com/electron/electron-quick-start

// 进入这个仓库
cd electron-quick-start

// 安装依赖并运行
cnpm install 、 npm install 安装依赖

// 运行
npm start

二、通过electron-forge 创建项目

electron-forge相当于electron的一个脚手架,可以让我们更方便的创建、运行、打包electron项目。

// 全局安装 electron-forge(只需要一次)
npm install -g electron-forge    /  cnpm install -g electron-forge 
// 创建项目
// 注意:这一步会默认安装模块 ,如果失败删掉node_modules,重新cd到项目里面运行 cnpm install  或者yarn
electron-forge init my-new-app

// cd到项目里面
cd my-new-app

// 运行项目    
npm start

经测试发现运行报错

解决办法:

  1. 把怕package.json文件的内容替换成以下内容

    {
      "name": "my-new-app",
      "productName": "my-new-app",
      "version": "1.0.0",
      "description": "My Electron application description",
      "main": "src/index.js",
      "scripts": {
        "start": "electron-forge start",
        "package": "electron-forge package",
        "make": "electron-forge make",
        "publish": "electron-forge publish",
        "lint": "eslint src --color"
      },
      "keywords": [],
      "author": "Administrator",
      "license": "MIT",
      "config": {
        "forge": {
          "make_targets": {
            "win32": [
              "squirrel"
            ],
            "darwin": [
              "zip"
            ],
            "linux": [
              "deb",
              "rpm"
            ]
          },
          "electronPackagerConfig": {
            "packageManager": "yarn"
          },
          "electronWinstallerConfig": {
            "name": "my_new_app"
          },
          "electronInstallerDebian": {},
          "electronInstallerRedhat": {},
          "github_repository": {
            "owner": "",
            "name": ""
          },
          "windowsStoreConfig": {
            "packageName": "",
            "name": "mynewapp"
          }
        }
      },
      "dependencies": {
        "electron-compile": "^6.4.3",
        "electron-squirrel-startup": "^1.0.0"
      },
      "devDependencies": {
        "babel-plugin-transform-async-to-generator": "^6.24.1",
        "babel-preset-env": "^1.7.0",
        "babel-preset-react": "^6.24.1",
        "electron-forge": "^5.2.2",
        "electron-prebuilt-compile": "2.0.4",
        "eslint": "^3",
        "eslint-config-airbnb": "^15",
        "eslint-plugin-import": "^2",
        "eslint-plugin-jsx-a11y": "^5",
        "eslint-plugin-react": "^7"
      }
    }
  2. 把ndoe_modules删掉
  3. cmd 运行 npm i 或 cnpm i

三、手动创建

1、新建一个项目的文件夹 (文件夹不能是中文)

2、新建一个index.html 和一个main.js

3、npm init --yes 生成一个package.json 配置项目的元数据

注意的是package.json里面配置的 main 必须是入口js(主进程)

main.js Demo代码

// 引入electron模块
let electron = require('electron');
let app = electron.app;
let BrowserWindow = electron.BrowserWindow;

// 引入nodejs中的path模块
let path = require('path')

let mainWindow = null;

app.on('ready', ()=> {
    // 声明一个窗口
    mainWindow = new BrowserWindow({
        width: 800,
        height:600,
        // 解决 Electron 5.0 版本出现 require is not defined 的问题
        webPreferences: {
            nodeIntegration: true
        }
    });

    // 窗口加载指定页面
    // mainWindow.loadFile("index.html");
    mainWindow.loadURL(path.join('file:',__dirname,'index.html'));

    console.log(path.join('file:',__dirname,'index.html')); // file:\D:\work\code\electronproject\eledemo03\index.html

    // 关闭窗口的回调函数
    mainWindow.on('close', () => {
        mainWindow = null;
    });
});

4、electron . 运行项目

Last modification:August 16th, 2020 at 07:57 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment