React18+Vite+Eectron从入门到实战系列之一环境安装篇

embedded/2024/12/22 20:30:59/

如果我们的技术栈是react,也想要用electron来开发一个桌面的多端应用该怎么做呢?这篇文章选择了react的技术栈,讲解了环境的初始化步骤

实现效果

请添加图片描述

步骤

在这里插入图片描述

  • 创建 react 项目
npm create vite@latest my-react-app
  • 安装依赖
cd my-react-app
npm install
  • 启动项目
npm run dev

浏览器能打开我们的 app 页面即可。

electron_31">安装 electron

npm install electron -D
npm i electron-builder -D

注意:这两个依赖包是开发环境依赖,生产环境不需要安装。否则,后面打包应用会报错

完整的配置文件如下:

{"name": "r18electronapp","private": true,"version": "0.0.1","main": "./electron/main.js","description": "r18electronapp","author": "gf.r18electronapp","scripts": {"dev": "vite","build": "vite build","lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0","preview": "vite preview","ele:build": "vite build && electron-builder"},"build": {"productName": "r18electronapp","appId": "gaofeng.r18electronapp","copyright": "gf.r18electronapp © 2024","compression": "maximum","asar": true,"directories": {"output": "release/"},"nsis": {"oneClick": false,"allowToChangeInstallationDirectory": true,"perMachine": true,"deleteAppDataOnUninstall": true,"createDesktopShortcut": true,"createStartMenuShortcut": true,"shortcutName": "ElectronDeskTopTool"},"win": {"icon": "./public/favicon.ico","artifactName": "${productName}-v${version}-${platform}-setup.${ext}","target": [{"target": "nsis"}]},"mac": {"icon": "./public/favicon.ico","artifactName": "${productName}-v${version}-${platform}-setup.${ext}"},"linux": {"icon": "./public/favicon.ico","artifactName": "${productName}-v${version}-${platform}-setup.${ext}"}},"dependencies": {"react": "^18.3.1","react-dom": "^18.3.1","vite-plugin-electron": "^0.28.7"},"devDependencies": {"@types/react": "^18.3.3","@types/react-dom": "^18.3.0","@vitejs/plugin-react": "^4.3.1","electron": "^31.3.1","electron-builder": "^24.13.3","eslint": "^8.57.0","eslint-plugin-react": "^7.34.3","eslint-plugin-react-hooks": "^4.6.2","eslint-plugin-react-refresh": "^0.4.7","vite": "^5.3.4","vite-plugin-electron-renderer": "^0.14.5"}
}

如果报错,按提示安装即可。问题不大。
在这里插入图片描述

  • 修改 packge.json
    添加"main": "./electron/main.js",,删除type:module,添加desctiption,添加author

  • 创建 electron 目录

mkdir electron
  • 创建 main.js
touch electron/main.js
touch electron/preload.js

增加.npmrc 配置

strict-ssl=false
registry=https://registry.npmmirror.com/
electron_mirror=https://registry.npmmirror.com/-/binary/electron/
electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/
# ELECTRON_BUILDER_BINARIES_MIRROR=https://mirrors.huaweicloud.com/electron-builder-binaries/

配置 vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import electron from "vite-plugin-electron/simple";// https://vitejs.dev/config/
export default defineConfig({plugins: [react(),electron({main: {// `build.lib.entry的快捷方式`entry: "electron/main.js",},preload: {//`build.rollupOptions.input的快捷方式`input: "electron/preload.js",},// 可选:在渲染器进程中使用Node.js APIrenderer: {},}),],
});

运行

npm run dev

在这里插入图片描述

打包应用

npm run ele:build

请添加图片描述

请添加图片描述
请添加图片描述


http://www.ppmy.cn/embedded/93759.html

相关文章

大恒相机通过Line2或Line3直接给出3.3V触发,形成分时曝光

大恒相机通过Line2或Line3直接给出3.3V触发,形成分时曝光 一、分时曝光需求二、3.3V信号分时曝光设计 写在前面 上班了,没多少时间再去精度论文了,大多是项目上的事情。 一、分时曝光需求 一般的12V光源通过光源控制器与大恒相机Line1线连接…

为什么oceanbase分区后查询效率能提高

OceanBase 分区后查询效率能够提高,主要有以下几个原因: 数据局部性增强: 分区将数据按照特定的规则划分到不同的分区中。当查询只涉及特定分区的数据时,可以快速定位到相关分区,减少了需要扫描的数据量。例如&#…

色轮在数据可视化中的应用

在数据可视化中,色彩的运用不仅仅是为了美观,更是为了传达信息、区分数据和提升图表的易读性。本文探讨色轮及其色彩公式的应用,帮助大家更好地运用色彩来提升数据可视化的效果。 1、色轮的基础概念 色轮是一个用于表示颜色之间关系的图形工…

Midjourney入门-提示词基础撰写与公式

​ 前言 在前几篇教程里我们已经可以初步使用Midjourney进行出图了。 包括也了解了Midjourney的指令与参数。 但如果你想用Midjourney去生成各种各样高质量的图片, 并且生成的图片是你想要的画面内容,也就是更好控制生成图片的画面内容与风格&#xf…

html 的value属性

在HTML中&#xff0c;<input>元素的value属性主要用于定义输入框的初始值。然而&#xff0c;如果你没有在HTML中显式地为<input>元素设置value属性&#xff0c;这并不意味着该元素没有value属性或value属性为空。 实际上&#xff0c;对于<input type"text…

搜维尔科技:2024上半年,我们用manus VR数据手套制作的一些经典案例

2024上半年&#xff0c;我们用manus VR数据手套制作的一些经典案例 搜维尔科技&#xff1a;2024上半年&#xff0c;我们用manus VR数据手套制作的一些经典案例

安卓免root虚拟摄像头插件,虚拟视频替换本机相机,微信QQ陌陌都可以,只hook类代码

这个是开源的&#xff0c;然后功能就跟标题描述的一样&#xff0c;软件成品我这里不会发布&#xff0c;但是会把dex核心字节集文件分享出来&#xff0c;方便大家学习&#xff0c;软件原理就是通过HOOK技术截取相机视频流&#xff0c;然后实现虚拟视频的效果&#xff0c;然后微信…

React和Vue如何实现大文件上传

React和Vue都提供多种方法来实现大文件上传&#xff1a; 利用第三方库&#xff1a;React和Vue都支持多种第三方库实现大文件上传&#xff0c;如React Dropzone和Vue FilePond等。这些库包含拖放上传、上传进度条、文件类型限制等功能&#xff0c;满足大部分大文件上传需求。 …