Electron创建新的项目

创建一个新的react app项目

创建项目脚手架资料

1
2
3
https://github.com/sindresorhus/awesome-electron

https://github.com/vitejs/awesome-vite#templates

配环境

把火绒退出，杀毒软件的锅

参考链接：https://www.cnblogs.com/makalochen/p/16154510.html

国内源的问题：

打开npm的配置文件

1
npm config edit

在空白处将下面几个配置添加上去,注意如果有原有的这几项配置，就修改

1
2
3
registry=https://registry.npmmirror.com
electron_mirror=https://cdn.npmmirror.com/binaries/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

image-20220416213131265

然后关闭该窗口，重启命令行，删除node_modules文件夹，并重新安装依赖

1
npm install

再次删除node_modules文件夹，并执行下面的命令清除缓存

1
npm cache clean --force

再次安装

1
npm install

MinGW-w64安装

https://shaogui.life/2021/03/10/windows上安装minGW/

1
2
3
npm rm -g create-react-app
npm install -g create-react-app
npx create-react-app my-app

add this inside package.json file before closing the “}”

1
2
3
4
5
6
,"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

Electron项目创建的三种方法

https://blog.csdn.net/weixin_40629244/article/details/115618121

  1. 克隆仓库，快速启动
  2. 克隆项目；

git clone https://github.com/electron/electron-quick-start
2. 进入这个项目下；

1
cd electron-quick-start
  1. 安装依赖；
1
npm install
  1. 运行项目；
1
npm start

打开快速启动的项目，主要有以下几个文件：

(1). index.html ，渲染进程；

(2). render.js，渲染进程，在index.html中引用；

(3). main.js，主进程；

(4). preload.js，监听DOM加载完成，在主进程中调用。

  1. 通过脚手架搭建项目
    electron-forge是一个用来搭建electron项目的脚手架，不仅可以用来运行项目，还可以用来打包项目。

官网：Getting Started - Electron Forge(https://www.electronforge.io/)

  1. 如果电脑上安装了安装了最新版本的 node 可以使用 npx 创建项目，如果安装了 yarn 也可以使用 yarn 创建项目；
1
npx create-electron-app my-new-app

或者

1
yarn create electron-app my-new-app
  1. 运行项目；
1
2
3
4
// 进入项目
cd my-new-app
// 启动项目
npm start

如果无法使用npx或是yarn安装项目，可以用传统的方法来完成。

1
2
3
4
5
6
7
8
9
10
11
// 安装脚手架
npm install -g @electron-forge/cli

// 初始化项目
electron-forge init my-new-app

// 进入项目
cd my-new-app

// 启动项目
npm start

GitHub - electron-userland/electron-forge: A complete tool for creating, publishing, and installing modern Electron applications

  1. 手动创建项目

  2. 新建项目文件夹；

  3. 新建渲染进程 index.html 文件与主进程 main.js 文件；

  4. 初始化项目，创建package.json；

1
npm init

请注意，package.json中的主文件必须名为main.js。

  1. 在项目中安装Electron；

虽然在全局有安装Electron，但是在写代码的时候并没有提示，所以需要进入项目中安装一下，这样就会有提示了。

cnpm i electron --save-dev
5. 编写主进程main.js代码；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
const { app, BrowserWindow } = require("electron");
const path = require("path");
 
const createWindow = ()=>{
    // 创建窗口
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600
    });
    // 加载本地文件
    mainWindow.loadFile(path.join(__dirname,"index.html"));
    // 加载远程地址
    // mainWindow.loadURL('https://github.com');
}
 
// 监听应用的启动事件
app.on("ready",createWindow);
 
// 兼容MacOS系统的窗口关闭功能
app.on("window-all-closed",()=>{
    // 非MacOS直接退出
    if(process.platform!="darwin"){
        app.quit();
    }
});
 
// 点击MacOS底部菜单时重新启动窗口
app.on("activate",()=>{
    if(BrowserWindow.getAllWindows.length==0){
        createWindow();
    }
})
  1. 引入eslint 检查代码；

(1). 安装eslint；

1
cnpm install -g eslint

(2). 在项目中初始化eslint；

1
eslint --init

初始化时会有各种选项，选项可以参考下面的结果。

  1. 运行项目；
1
electron .

效果如下：

img