首先,我们需要在一个常规的React项目中,安装electron,为了使我们功能代码部分和electron窗口部分更清晰,我们可以在项目的根目录新建一个desktop文件夹,专门用来存放electron部分代码和资源。目录结构大概如图所示: 我们cd desktop到desktop文件夹下,执行npm init -y初始化包管理器,然后安装electron相关包:electron:electron核...
在Electron应用程序的主进程中,你需要使用Electron提供的API来渲染React组件。在main.js文件中,使用以下代码: 代码语言:javascript 复制 const{app,BrowserWindow}=require('electron');constpath=require('path');functioncreateWindow(){constwin=newBrowserWindow({width:800,height:600,webPreferences:{nodeIntegration:tru...
Electron 使用 Chromium 来渲染用户界面,所以开发者可以使用前端的 Web 技术(如 HTML、CSS、JavaScript)来创建界面。 3、Node.js 集成: Electron 集成了 Node.js,因此可以访问文件系统、进程管理等操作系统功能。这允许 Electron 应用同时拥有桌面应用的功能以及 Web 应用的灵活性。 4、自动更新: Electron 应用支持自...
在之前我们知道electron通过main.js这个文件里new一个BrowserWindow来新建一个窗口,同样的,这个应用的弹窗,也可以通过new一个BrowserWindow来新建: 代码语言:javascript 复制 const{app,BrowserWindow}=require('electron')functioncreateWindow(){// 创建浏览器窗口constwin=newBrowserWindow({width:800,height:600,webPreferenc...
一.搭建react+electron项目 1.创建一个react项目 create-react-app my-app cd my-app npm start 看下页面是否打开,是否运行正确。 注意:如果页面没有src文件夹, 第一种:卸载全局安装包: npm uninstall -g create-react-app yarn global remove create-react-app ...
终端执行命令npx create-react-app react-electron自动进行配置安装 进入react-electron目录下执行yarn start,项目自动运行在 3000 端口 2️⃣-Demo 配置 electron 主进程 因为public文件夹不会被webpack打包处理,会直接复制一份到dist目录下,所以在public中新建electron.js作为主进程 ...
Electron和Create-React-App 使用electron-vite 简易版 npm install --save-dev electron package.json配置文件中的scripts字段下增加一条start命令 { "scripts": { "start": "electron ." } } 可以在开发模式下打开应用 基础的环境搭建只需要三个文件 ...
要使用React和Electron构建跨平台的桌面应用,可以按照以下步骤进行: 安装Node.js和npm:首先确保你的电脑上安装了Node.js和npm(Node Package Manager)。 创建一个新的Electron项目:使用Electron提供的命令行工具创建一个新的Electron项目。可以使用以下命令来安装Electron CLI工具: ...
1. 安装Electron 首先,你需要安装Electron。在终端中运行以下命令: npm install electron --save-dev 1. 2. 创建Electron应用程序 使用Electron提供的CLI工具,你可以创建一个Electron应用程序。在终端中运行以下命令: npx electron-forge init my-app 1.
1、Electron:**electron是一个使用js,html和css等的web技术创建原生桌面应用的框架,他基于chromium和node.js,构建的应用可以在Mac,windows和Linux三个平台上运行。 2、React和react-router在该项目中负责构建单页面应用和路由跳转的实现。 3、Antd作为UI框架。