vite electron 多窗口

2024-10-18

基于vue3.0+electron新开窗口|Electron多开窗体|父子模态窗口

最近一直在折腾Vue3+Electron技术结合的实践,今天就来分享一些vue3.x和electron实现开启多窗口功能. 开始本文之前,先来介绍下如何使用vue3和electron来快速搭建项目. 目前electron.js的star高达89.3K+,最新稳定版v11.2.3. 使用vue开发electron应用,网上有个比较火的脚手架electron-vue,不过里面的版本太低,而且使用的是vue2.x语法. 今天主要分享的是vue3语法开发electron应用,所以只能手动搭建开发环境.

electron 的窗口设置最大化最小化

/** * Created by Administrator on 2016/11/23. * 页面对窗口的一些操作封装,用于渲染进程 */ "use strict"; const Common = require('../../window/common.js'); const { ipcRenderer, remote } = require('electron'); const WinReg = require('winreg'); const RUN_LOCATION = '\

Vite ❤ Electron——基于Vite搭建Electron+Vue3的开发环境【一】

背景目前社区两大Vue+Electron的脚手架:electron-vue和vue-cli-plugin-electron-builder, 都有这样那样的问题,且都还不支持Vue3,然而Vue3已是大势所趋, Vite势必也将成为官方Vue脚手架, 下图是尤雨溪在开发好Vite之后与webpack之父的对话所以开发一个Vite+Vue3+Electron的脚手架的需求日趋强烈我前段时间做了一个, 但是发现了一些与Vite有关的问题, 比如:Vite会把开发环境的process对象吃掉的问

electron 创建窗口2

/** * 窗口管理类,单例,负责创建所有窗口,保存窗口实例 */ const path = require('path'); const os = require('os'); const EucWindow = require('./euc_window'); /** * 窗口管理类,单例,负责创建所有窗口,保存窗口实例 */ class WindowManager { constructor() { this.main = null; this.about = null; this.set

electron创建窗口常用配置参数

{ "width": 800,//指定窗口的宽度,单位: 像素值. 默认是 800 "height":600,//指定窗口的高度,单位: 像素值,. 默认是 600 "minWidth":400,//窗口的最小宽度,单位: 像素值, "minHeight":300,//窗口的最小高度,单位: 像素值, "title":"测试窗口",//窗口的默认标题 "center"

【Electron Playground 系列】窗口篇

作者:Kurosaki 本文主要讲解Electron 窗口的 API 和一些在开发之中遇到的问题. 官方文档虽然比较全面,但是要想开发一个商用级别的桌面应用必须对整个 Electron API 有较深的了解,才能应对各种需求. 1. 创建窗口通过BrowserWindow,来创建或者管理新的浏览器窗口,每个浏览器窗口都有一个进程来管理. 1.1. 简单创建窗口 const { BrowserWindow } = require('electron'); const win = ne

【Electron Playground】Electron 窗口问题汇总

作者:Kurosaki 本节旨在汇总在开发Electron 窗口可能遇到的问题,做一个汇总,后续遇到问题会持续更新. 1. 窗口闪烁问题. const { BrowserWindow } = require('electron'); const win = new BrowserWindow(); win.loadURL('https://github.com'); 使用new BrowserWindow() 创建出窗口,如果不作任何配置的话,窗口就会出现,默认是白色的:这个时候使用win.lo

如何开发Vite3插件构建Electron开发环境

新用户购买<Electron + Vue 3 桌面应用开发>,加小册专属微信群,参与群抽奖,送<深入浅出Electron>.<Electron实战>作者签名版. 1等奖:<深入浅出Electron>+<Electron实战> 2等奖:<深入浅出Electron> 3等奖:<Electron实战> 抽奖活动是掘金组织的,仅限近几日加入微信群的新成员(目前人还不多),我负责抽奖.邮寄,11月20日开始抽奖.凡参与抽奖的读者都有

electron打包发布

1.全局安装electron npm install electron -g 在cmd 直接输入 electron 直接启electron 2.编写第一个Electron应用在任何地方,建立一个app的目录并新建3个文件: app/ ├── package.json ├── main.js └── index.html package.json { "name" : "your-app", "version" : "0.1.0&quo

【Electron】Electron开发入门（二）：创建项目Hello Word

创建简单的Electron程序 1.首先,切换到你的项目空间,我的在 D:\ProjectsSpace\ElectronProjects\ElectronTest,ElectronTest是案例项目文件夹 ①.打开cmd,切换到自己的项目文件目录然后输入命令 npm init创建 package.json文件, 然后按照步骤一步一步来,一直到最后最后成功的图: 内容为: { "name": "package.json", "version":

现在,以编程方式在 Electron 中上传文件,是非常简单的!

必要的上下文想尽快熟悉上下文语境的,可以点这里: https://github.com/electron/electron/issues/749 这段讨论,其实本来是讨论如何自动设置 input 标签的值来实现自动选择文件的.前一段有个 Electon 中自动上传文件的需求,被 Google 带到了这个讨论地址.虽然,最后当时是采用的不同讨论中的本地代理器转发cookie的策略,但不得不承认,这些讨论还是给了自己很大启发的 -- 虽然暂时并没有什么用. It's near impossible

electron_window 创建窗口

/** * 窗口基类,封装通用的窗口操作 */ const { BrowserWindow } = require('electron'); /** * 基本窗口样式 * @type {{width: number, height: number, resizable: boolean, frame: boolean, parent: object, modal: boolean}} */const windowStyle = { title: '云', // 窗口标题 width:

electron 开发拆坑总结

electron 总结前言有一个web项目需要用客户端来包装一下项目的主要业务都在服务器上所以项目的大多数功能都用url 地址来访问: 客户端登陆界面在本地打包客户端的本地登陆界面做为登陆入口: electron 开发中有一个概念需要理解我暂且叫主进程吗 main, 这个进程的控制在项目的配置 package.json 的main 字段中定义: main.js 作为electron 控制的后端入口, 基本的主要控制都是在这个文件里面定义 eletron 控制系统的接口很多也

第一章 Electron介绍 | Electron in Action(中译)

Github 官方地址代表作: Visual Studio Code Atom - Code editor. Github开源的代码编辑器,Electron起源地 Visual Studio Code - Cross-platform IDE. 近几年最火的代码IDE Hyper - Terminal. 3万多星的命令行窗口,慌了! 其他本章主要内容理解Electron是什么学习Electron基于什么技术了解使用Electron和传统Web应用程序有什么不同构建Electron应用

electron原来这么简单----打包你的react、VUE桌面应用程序

也许你不甘心只写网页,被人叫做"他会写网页",也许你有项目需求,必须写桌面应用,然而你只会前端,没关系.网上的教程很多,但是很少有能说的浅显易懂的,我尽力将electron打包应用说的清晰明了,希望能你在写自己的应用的时候,感到心中有数.话不多说,进入正题: 一.安装electron 为了方便你以后的使用,建议全局安装.以后在任何文件夹都能使用electron.怎么安装就不废话了,不会的去官网,安装好electron之后也安装一个专用的打包工具electron-packager,以方便

二、Electron + Webpack + Vue 搭建开发环境及打包安装

目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack 搭建开发环境及打包安装 ------- 打包主进程 Electron + Webpack + Vue 搭建开发环境及打包安装 ---- 打包electron应用二.打包主线程 1. 项目目录结构首先创建一个项目文件夹main 然后在该文件夹中执行 npm init -y 命令目录结构说明: main | - app 文件输出目录 | - builder

electron另一种运行方式

编写helloword 全局安装软件 npm install -g electron 快速编写html html:5 完整代码和流程: 1.index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=&q

electron 起步

electron 起步为什么要学 Electron,因为公司需要调试 electron 的应用. Electron 是 node 和 chromium 的结合体,可以使用 JavaScript,HTML 和 CSS 等 Web 技术创建桌面应用程序,支持 Mac.Window 和 Linux 三个平台. electron 的成功案例有许多,比如大名鼎鼎的 vscode. hello-world 官网有个快速启动的应用程序,我们将其下载到本地运行看一下. # Clone this reposit

ElectronNetTest

系统环境:Ubuntu 18.04.2 Desktop 软件环境:asp.net core 2.2,Node.js(version>8.6) Github上有人说不支持 asp.net core 2.2,详见:https://github.com/ElectronNET/Electron.NET/issues/209 但我这里没这个问题,我装的就是2.2版本,估计是作者已经更新了,但还没关闭问题. 开始---->> 1.创建ElectronNetTest文件夹并进入 2.输入 dotne

nightmare API

nightmare API 简单介绍 2016-04-18 nightmare 的 API 不是特别的多,平常使用比较多的主要是配置 nightmare 以及与页面交互的相关API,这里是官方给出的 nightmare 文档可以参考学习. 相关配置 API API 描述 Nightmare(options) 初始化实例,options 为设置 Electron 浏览窗口的配置,参考文档 waitTimeout (default: 30s) wait 等待最长时间,超过这个时间还未返回,则抛出异常

electron实现类似QQ来新消息时的闪烁与任务栏窗口提醒

公司项目有一款带即时聊天.群组功能的APP,因为要给客服人员使用,需要开发PC版本.之前使用C#开发过一个PC版本,但是C#的UI这一块支持的不太好,而且升级比较麻烦,我就牵头基于Electron去实现了一个PC版本. 遇到了客服那边提过来的需求,当有新消息过来的时候,如果聊天窗口最小化了,需要有提醒,系统托盘也要像QQ一样有新消息过来的提醒与闪烁. 查了一个资料,两个功能都实现了. 先看任务栏的提醒样式如何实现 const path = require('path'); con

vite electron 多窗口

热门专题