搭建一个Electron项目时遇到的一些小问题

一、搭建 Electron 项目

1、创建一个文件夹

mkdir electron-desktop

2、进入创建好的文件夹

cd electron-desktop

3、执行如下命令：

yarn init -y
yarn add electron --dev

        以上命令创建一个空白的项目，项目中包含一个package.json 和 node_modules目录下安装的依赖。

        我创建的过程中同时生成了一个package-lock.json文件，导致我在第四步的时候一直报错，报错中提示移除该文件：

 移除后再次执行yarn add命令时仍旧报错：

搜索后找到以下解决方法：

• 先清一下缓存：npm cache clean --force
• 设置一下镜像源：npm config set registry https://registry.npm.taobao.org
• 原来没有设置过的，设置镜像地址：npm config set disturl https://npm.taobao.org/dist
• 设置electron镜像：npm config set electron_mirror https://npm.taobao.org/mirrors/electron/

以上方法来自：CSDN博主「明仔的阳光午后」的原创文章，原文链接：https://blog.csdn.net/qq_41785288/article/details/128323448

验证是否安装成功：

• npx electron -v

成功后再次执行yarn add，

 二、编写启动项目

1、创建src目录，该目录下继续创建main和renderer文件夹：

        Electron中有 主进程 和 渲染进程 两个重要的概念，在主进程里面用Node.js代码调用 Electron 封装好的API来创建窗口，管理应用整个生命周期，在渲染进程里面加载传统的Web界面：

• main 目录用于存放跟主进程相关的代码
• renderer目录用于存放跟渲染进行相关的代码

2、 renderer目中中创建index.html 文件，文件内容根据自己的需求编写

3、在main目录中创建index.js 作为主进程的入口，加载index.html文件

const { app, BrowserWindow } = require('electron')
const path = require('path')

let win
app.whenReady().then(() => {
  win = new BrowserWindow({ width: 800, height: 600, titleBarStyle: 'hiddenInset' })
  win.loadFile(path.join(__dirname, '../renderer/index.html'))
})

4、在package.json文件中添加配置如下：

"main": "src/main/index.js",
"scripts": {
  "start": "electron ."
},

5、运行搭建好的项目：

npm start

成功即可在桌面打开搭建的应用。

路漫漫其修远兮，吾将上下而求索！