将现有的Umijs添加electron支持

最新推荐文章于 2024-04-30 21:38:13 发布
最新推荐文章于 2024-04-30 21:38:13 发布
阅读量2.7k 收藏 2
点赞数 1
分类专栏： Electron 文章标签： typescript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Takayamaaren/article/details/107339646
版权

介绍

UMIjs在前端的范围内算是比较广泛选择的技术栈，因为其开箱即用而且集合了大部分前端开发中的常用工具，并且整合了Antd，对前端开发，特别是类似于控制台的开发都有较大的优势。

electron是将网页打包成桌面端应用的工具，对于前端来说，可以一套代码生成网页端和桌面端，非常的方便。

本文主要内容是将现有Umijs添加Electron支持。

所有的代码请查看 AllenTom/umi-electron-typescript-template

Electron

electron主要由Main和Renderer组成，Main包含了Node等常用的依赖，renderer包含了应用的UI，这两个共同组成了一个应用。

在UMIjs中 我们会使用umi build命令来输出打包后的文件，一般在/dist的文件夹中，例如：
dist文件夹
UMIjs可以将复杂的工程一键打包，输出多个源文件，输出的源文件可以任意地部署在需要的环境上。Electron并不使用Umijs的工程源码，而是在renderer中运行打包后的代码。
使用UMI生成前端代码
生成Electron代码
生成桌面应用

所以我们在生成electron应用前先执行umi build来将renderer中的代码准备好。

整个流程为

最低0.47元/天 解锁文章
Takayamaaren
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
使用Umi构建Electron应用
OhFramework的博客
09-17 459
Electron是一个流行的框架，可用于构建跨平台的桌面应用程序。Umi是一个基于React的可扩展企业级前端应用框架，它提供了一套完整的工具和约定，用于快速构建高质量的React应用程序。通过以上步骤，您可以使用Umi和Electron快速搭建跨平台的桌面应用程序。Umi提供了开箱即用的React开发环境和工具，而Electron使您能够将Web技术应用于构建原生应用程序。这将创建一个Electron窗口并加载Umi应用程序。您可以在Electron窗口中使用Umi的开发服务器进行开发和调试。
探索 Electron+Umi+Ant Design Pro：构建跨平台桌面应用的新框架
gitblog_00043的博客
04-21 450
探索 Electron+Umi+Ant Design Pro：构建跨平台桌面应用的新框架 项目地址:https://gitcode.com/yaoleia/electron-umi-antd-pro 项目简介 如果你在寻找一个强大的工具来构建美观、高效的桌面应用程序，那么Electron-umi-antd-pro可能是你的理想选择。该项目将流行的前端框架Umi和Ant Design Pro与Ele...
electron+umiJS4-react - 搭建桌面应用 - 使用umjs4搭建electron
qiaolezi787的博客
08-11 666
electron+umiJS4-react - 搭建桌面应用 - 使用umjs4搭建electron
使用Electron构建跨平台的桌面应用程序（二）使用React【Umijs框架】+ Electron+ Antd 来实现一个简单的计算器功能
孙三苗的专栏
07-04 970
上一节 使用Electron构建跨平台的桌面应用程序（一）快速入门 简单的熟悉了一下Electron，这一节，主要是如何构建一个桌面应用，鉴于只使用 Electron 来构架工具开发效率较慢的原因，所以本文使用React + Electron + Antd 来实现一个简单的计算器功能。 参考文章：https://www.jianshu.com/p/ab31487779c9 使用React + Electron+ Antd 来实现一个简单的计算器功能一、环境搭建1、创建react项目2、引入electron3
umi-electron-typescript：一个基于umijs + electronic + typescript的示例
02-04
铝电子打字稿 基于umijs + electronic +打字稿的示例 产品特点 支持对主进程和渲染器进程进行热重装 支持打字稿 安装 首先，通过git克隆仓库： git clone git @ github . com : wangtianlun / umi - electron - typescript . git 然后用yarn安装依赖项 $ yarn 开始开发 $ yarn start 打包 $ npm run pack 如果您想打包为dmg（在Mac上）或zip，请按照以下步骤操作 $ npm run dist 如果要打包所有平台（例如：mac，window
umi-plugin-electron-builder：umi的electron插件
02-17
umi-plugin-电子构建器 本插件参考 安装 仅支持umi3 $ npm i umi-plugin-electron-builder --save-dev 或者 $ yarn add umi-plugin-electron-builder --dev 安装之后会自动生成相关文件 默认安装最新版本的电子 自动生成主进程文件src / main / main.ts 自动在package.json增加 { "scripts" : { "rebuild-deps" : "electron-builder install-app-deps" , "electron:dev" : "umi dev electron" , "electron:build:win" : "umi build electron --win" , "electron:build:m
基于 umijs + electron + ant-design-pro 的项目模板开发代码
03-12
3. **Electron集成**：学习如何在`umijs`项目中引入Electron，设置主进程和渲染进程，理解`main.js`和`renderer.js`的职责，以及如何处理进程间的通信（如使用ipcMain和ipcRenderer）。 4. **ant-design-pro的使用*...
umi-electron-template:海米电子模板
03-07
海米电子模板 一个基于和的开发模板 特性 架构 基于，享受完整的开发生态； 采用打包工具； 使用Main与Renderer双目录架构； 基于实现DI / IoC ...数据持久化：集成作为本地数据库， 作为ORM；...签名公证：集成的macOS ...
umi-example-electron:umi2 整合 electron 示例
05-25
umi-example-electron 项目基于 umi@2.10.1、electron@6.0.12 的整合 由于 sorrycc 的 示例是基于老版本 umi@1，自己没找到最新版本示例，所以自己动手撸了一个 参考 使用 // 安装依赖 npm i // 开发模式 npm run ...
win7支持的最新electron 24源码
08-06
win7支持的最新electron 24源码，痛快用 Electron是一个流行的开源框架。它允许开发人员使用现代的Web技术（如HTML、CSS和JavaScript）构建跨平台的桌面应用程序。 首先，Electron框架是由GitHub开发的。它最初是...
电子基地：electron@9.0+umi3.1+Typescript。基于electron开发的web系统
02-18
中间网 web模板+ umi思想集成 集成说明 配置基于umi @ 3，部分参考Ant Design Pro 使用 自动生成不要修改 :upside-down_face: src/.umi/core/routes.ts查看src/.umi/core/routes.ts可作为配置菜单的参考 菜单配置src/layouts/menu/config.tsx 目录树 . ├── mock/ ├── public/ ├── src/ . ├── .umi/ # umi 根据约定即使生成的文件夹 . ├── assets/ . . ├── image/ . . ├── style/ . ├── layouts/ # 外壳布局 . . ├── menu/ . . . ├── config.tsx
推荐项目：umi-plugin-electron-builder - 实现Electron应用的高效构建与打包
gitblog_00007的博客
03-30 471
推荐项目：umi-plugin-electron-builder - 实现Electron应用的高效构建与打包 项目地址:https://gitcode.com/BySlin/umi-plugin-electron-builder 项目简介 umi-plugin-electron-builder 是一个基于 umi 框架的插件，专为开发 Electron 应用提供便捷的构建和打包解决方案。它整合了...
react+umi项目打包成electron桌面应用
Cvory
10-19 2658
项目介绍 web项目使用的是 React+Umi+Antd 使用的是umi的脚手架创建项目 yarn create @umijs/umi-app 链接：umi官网 流程 1.将web项目打包成静态文件后 2.在打包后的文件 再用electron打包成桌面应用 （所以其实是用什么框架或者脚手架，都没有什么关系，最后electron需要的是可直接在浏览器访问的静态文件=》npm run build 以后生成的index.html） Coding 将项目进行打包，使用命令行 npm run build
umi html模板,electron-react-umi模板
weixin_42347873的博客
06-18 238
electron-react-umi-tplelectron 8.2 + umi 3.1 + typescript react 16.12 + redux + antDesign 4.0 + eslint tslint react-tslint脚手架, 下载即用，已经为你做好了基座设施客户端集成:自动更新(electron-builder)托盘菜单app启动loading加载条electron打印...
Electron开发 umi react 应用
hawk2014bj的博客
04-30 899
Electron 是一个跨平台桌面端的应用框架，electron 底层依赖3 个核心组件 Chromium、Node.js、Electron API，Chromium 是 Chrome 的开源版本，Node.js可以编写后台应用程序，集成 Node.js 到 Electron，使得 Electron 可以使用 Node.js 提供的功能，例如访问本地文件和数据库。
Electron 打包 umi 项目，打开空白
从零开始的Rem486
12-08 944
问题： dev 环境使用 url 正常显示，打包后页面空白 // dev mainWindow.loadURL('http://localhost:8000/') // prod mainWindow.loadFile(path.resolve(__dirname, '../renderer', 'index.html')); 原因： history 模式只能部署到 web 服务器使用，默认是 history 解决： 路由使用 hash 模式 // .umirc.ts export default {
Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器，桌面安装运行
weixin_30598225的博客
04-29 2149
学习参考： electron-api-demos 我以下的方式，其实并把Ant Design Pro文件打包到生成的安装包里，所以，安装包=Ant Design Pro+Electron环境 ant-design-pro ----> version ：2.3.1 由于网上Ant Design Pro+Electron的资料太少，我就贡献一点经验 最近需要讲Ant...
electron 将electron动态的添加到网页中去
最新发布
05-11
如果您想将Electron动态添加到网页中，可以通过以下步骤实现： 1. 在网页中引入Electron的相关脚本文件。您可以在Electron官网上下载相关文件，也可以使用CDN方式引入。 2. 初始化Electron，通过调用相应API，可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值