[Electron] How to create an electron project:

---

[Electron official website] https://www.electronjs.org/zh/docs/latest/api/app

【1】npm init @quick-start/electron (recommended)

Execute the following commands on the command line:

npm init @quick-start/electron

This command will install and execute the scaffolding tool create-electron . You'll see hints for some optional features, such as frameworks (vue, react, …) and TypeScript support:
After creating the project, follow the instructions to install dependencies and start the Electron program:

[2] Clone warehouse, quick start

#1. 克隆项目；
git clone https://github.com/electron/electron-quick-start

#2. 进入这个项目下；
cd electron-quick-start

#3. 安装依赖；
npm install

#4. 运行项目；
npm start

Open the quick start project, there are mainly the following files:
(1). index.html, rendering process;
(2). render.js, rendering process, referenced in index.html;
(3). main.js, The main process;
(4). preload.js, which monitors the completion of DOM loading, is called in the main process.

[3] Build the project through scaffolding

electron-forge is a scaffolding for building electron projects, not only for running projects, but also for packaging projects.
Official Website: Getting Started - Electron Forge

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

#运行项目；
cd my-new-app  // 进入项目
npm start  // 启动项目

If it is not possible to install the project using npx or yarn, it can be done the traditional way.

// 安装脚手架
npm install -g @electron-forge/cli
 
// 初始化项目
electron-forge init my-new-app
 
// 进入项目
cd my-new-app
 
// 启动项目
npm start

【4】 Manually create a project

1. Create a new project folder;
2. Create a new rendering process index.html file and the main process main.js file;
3. Initialize the project and create package.json;

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

4. Install Electron in the project; although Electron is installed globally, there is no prompt when writing code, so you need to enter the project to install it, so that there will be a prompt.

cnpm i electron --save-dev

5. Write the main process main.js code;

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();
    }
})

6. Introduce eslint to check the code;

(1). 安装eslint；

cnpm install -g eslint
(2). 在项目中初始化eslint；

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

7. run the project;

electron .