【electron】electron项目创建的方式:

文章目录

        • [【1】npm init @quick-start/electron(推荐)](#【1】npm init @quick-start/electron(推荐))
        • [【2】 克隆仓库,快速启动](#【2】 克隆仓库,快速启动)
        • [【3】 通过脚手架搭建项目](#【3】 通过脚手架搭建项目)
        • [【4】 手动创建项目](#【4】 手动创建项目)

【Electron官网】https://www.electronjs.org/zh/docs/latest/api/app

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

在命令行中执行以下命令:

bash 复制代码
npm init @quick-start/electron

该命令将安装并执行脚手架工具 create-electron 。你将看到一些可选功能的提示,例如框架 (vue, react, ...) 和 TypeScript 支持:

创建项目后,按照说明安装依赖项并启动Electron程序:



【2】 克隆仓库,快速启动

bash 复制代码
#1. 克隆项目;
git clone https://github.com/electron/electron-quick-start

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

#3. 安装依赖;
npm install

#4. 运行项目;
npm start

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

(1). index.html ,渲染进程;

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

(3). main.js,主进程;

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

【3】 通过脚手架搭建项目

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

官网:Getting Started - Electron Forge

bash 复制代码
#如果电脑上安装了安装了最新版本的 node 可以使用 npx 创建项目,如果安装了 yarn 也可以使用 yarn 创建项目;
npx create-electron-app my-new-app或者yarn create electron-app my-new-app

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

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

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

【4】 手动创建项目

  1. 新建项目文件夹;
  2. 新建渲染进程 index.html 文件与主进程 main.js 文件;
  3. 初始化项目,创建package.json;
bash 复制代码
npm init 
#请注意,package.json中的主文件必须名为main.js。 
  1. 在项目中安装Electron;虽然在全局有安装Electron,但是在写代码的时候并没有提示,所以需要进入项目中安装一下,这样就会有提示了。
bash 复制代码
cnpm i electron --save-dev
  1. 编写主进程main.js代码;
bash 复制代码
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 检查代码;
bash 复制代码
(1). 安装eslint;

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

eslint --init
初始化时会有各种选项,选项可以参考下面的结果。 
  1. 运行项目;
bash 复制代码
electron .
相关推荐
蓝婷儿17 分钟前
每天一个前端小知识 Day 28 - Web Workers / 多线程模型在前端中的应用实践
前端
琹箐18 分钟前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠22 分钟前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农22 分钟前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
kymjs张涛1 小时前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵1 小时前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian6221 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失9491 小时前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端
唐叔在学习1 小时前
不用装插件!3轮对话,我用油猴脚本+AI复刻了掘金闪念笔记,真香!
javascript·浏览器
AliciaIr1 小时前
深入React事件机制:解密“合成事件”与“事件委托”的底层奥秘
javascript·react.js