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 . 运行项目