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

不要让自己的上限成为你的底线 前言 诈尸更新系列,为了跟上脚步,尝试了vue3,在学习vue3的时候顺便学习一手electron和ts,本教程将分别发布,源码会在最后的文章发布.因为还在开发中,目前也是为了防止有些遇到坑不会及时忘掉,所以先整理一部分出来 将分2部分发出教程,因为配置的东西个人感觉有点多并且跟开发内容相关的东西并不是很多,因此单独发出,见谅,第二篇这两天发出,长文警告!. 开发思路: 页面: 列表页index.vue 头部.搜索.内容部分,只能有一个列表页存在 设置页settin

不要让自己的上限成为你的底线 本来以为有万字的..没想到才堪堪近6000字.为了水文的嫌疑,只挑了重点的地方讲,比如component内的组件就挑了右键弹窗去说明,建议在看本文的时候边查看项目,有不懂的可以在下方评论,谢谢. github github: https://github.com/heiyehk/electron-vue3-inote 包下载 release: https://github.com/heiyehk/electron-vue3-inote/releases 接上篇配置篇

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

缘起 在Electron的渲染进程中(也就是页面代码中), 我们常常使用process.env来携带一些环境变量, 比如HTTP服务地址的基质,本地静态资源的路径等 这样做主要有两个目的 一个是方便开发者写多个配置环境变量的文件,区分生产环境.测试环境和开发环境 另一个是主进程和渲染进程共享一套环境变量,全局任何一个地方都随取随用,非常方便 正因为如此,一般的编译工具都不会动用户的process对象 但Vite不一样,Vite的作者认为Vite只是给Web(运行在浏览器中的)产品提供服务的, 所

基于vite2.x+electron12桌面端后台管理系统Vite2ElectronVAdmin. 继上一次分享vite2整合electron搭建后台框架,这次带来的是最新开发的跨桌面中后台权限管理系统.使用最新的前端技术栈,内置 i18n 国际化解决方案,动态权限路由,权限验证,整合了典型的表格/表单等业务模块功能. 一.技术栈 编码器:vscode vue3技术:vite2.1.5+vue3.0+vuex4+vue-router@4 跨端框架:electron^12.0.4 打包工具:vue

GitHub 的 Electron 框架(以前叫做 Atom Shell)允许你使用 HTML, CSS 和 JavaScript 编写跨平台的桌面应用.它是io.js 运行时的衍生,专注于桌面应用而不是 web 服务端. Electron 丰富的原生 API 使我们能够在页面中直接使用 JavaScript 获取原生的内容. 这个教程向我们展示了如何使用 Angular 和 Electron 构建一个桌面应用.下面是本教程的所有步骤: 创建一个简单的 Electron 应用 使用 Visual

0. 简介 http://electron.atom.io/ 官网 https://www.v2ex.com/t/277623   基于 Electron 的 Linux 下的网易云音乐 https://github.com/disoul/electron-cloud-music https://github.com/electron/electron/tree/master/docs-translations/zh-CN 中文文档 https://github.com/electron/ele

刚接触Electron+js开发PC端桌面应用程序的时候,简直一头雾水,搜了网上很多教程,有的要么讲的零零碎碎,要么就是版本太低,很多API语法都不能用了:现在我把一些有用的教程归纳一下,并把目前最新Electron版本1.4.0的使用语法贴出来,目的是为了有个能正常运行的DEMO教程: 一.配置安装 1.安装node ①.node.js下载链接http://nodejs.cn/download/ 选择适合自己电脑系统的安装包,比如win7 64位系统,那么选择下图红框中的 ②.安装完成以后在c

译]使用 AngularJS 和 Electron 构建桌面应用 原文: Creating Desktop Applications With AngularJS and GitHub Electron GitHub 的 Electron 框架(以前叫做 Atom Shell)允许你使用 HTML, CSS 和 JavaScript 编写跨平台的桌面应用.它是 io.js 运行时的衍生,专注于桌面应用而不是 web 服务端. Electron 丰富的原生 API 使我们能够在页面中直接使用 Ja

1.从网上下载的是nodejs的v0.10.42版本的安装文件,安装node-v0.10.42-x86.msi都使用默认安装,安装完成后会安装在C:\Program Files\nodejs\目录下,然后直接把安装的目录C:\Program Files\nodejs\拷贝出来,然后再拷贝到另外一个全新的系统上,假如我放到d:\nodejs\这个目录下,在这个目录中创建一个run.bat文件作为我们的运行环境. 编辑run.bat文件,输入内容如下: @echo off echo --------

在前一篇文章我们已经学习到了使用Electron来构建我们的文件浏览器了基础东西了,我们之前已经完成了界面功能和显示文件或文件夹的功能了,想看之前文章,请点击这个链接  .现在我们需要在之前的基础上来继续完成余下的功能,我们之前的只完成了界面和显示文件夹或文件.那么这篇文章我们需要完成如下功能: 1. 如果它是一个文件夹,我们可以对该文件夹进行双击,然后打开该文件夹.2. 当前文件夹就是刚刚我们双击的那个文件夹.3. 如果它内部有子文件夹的时候,我们也可以双击,然后重复第一步的操作步骤. 那么在

在之前的文章我们介绍了一下Electron的菜单创建和事件绑定,其中提到了一个remote模块,接下来我们继续说一下Electron的这个remote模块. 官方关于remote模块的地址:https://www.electronjs.org/docs/api/remote remote 模块为渲染进程(web页面)和主进程通信(IPC)提供了一种简单方法. 在Electron中, GUI 相关的模块 (如  dialog.menu 等) 仅在主进程中可用, 在渲染进程中不可用. 为了在渲染进程

PDF.js 是基于 HTML5 解析与渲染 PDF 的 JavaScript 库,由 Mozilla 主导开源. 本文旨在介绍 PDF.js 于 Electron 里如何开始使用,实际尝试了用其 API 或嵌入 HTML 的几种方式. 代码: https://github.com/ikuokuo/electron-pdf-viewer.git 从零准备项目 项目采用 Electron React Antd PDF.js 来实现,以下是从零准备项目的过程. Electron React 这里用

electron 基础 前文我们快速的用了一下 electron.本篇将进一步介绍其基础知识点,例如:生命周期.主进程和渲染进程通信.contextBridge.预加载(禁用node集成).优雅的显示窗口.父子窗口.存储并恢复 electron 窗口..右键上下文信息.右键菜单.菜单与主进程通信.选中文本执行 js 代码.托盘.nativeImage.截屏等等. Tip:为图方便,继续之前的环境进行操作. 第一个程序 下面这段代码会打开一个原生窗口,窗口里面会加载 spug 的一个系统: //

uniapp兼容多端自定义模态弹框组件UAPopup ua-popup 一款轻量级的uniapp自定义弹窗组件.汇集了android.ios和微信弹窗效果(msg消息.alert提示框.dialog对话框.actionsheet底部动作框.toast轻提示.长按定位菜单)等功能. 如下图:H5+App端+小程序效果,亲测多端运行一致. ◆ 引入使用  ▍在main.js中引入uapopup弹框组件 // 引入自定义弹框组件 import uaPopup from './components/ua

最近因为项目中使用的是 ActiveReports .Net 产品,因为他们最近新出了  ActiveReports JS 版本,所以内心有点痒痒,想试试这个纯前端版本报表控件到底如何,毕竟我们项目有一天也要从net 转为 js版本. 但是奈何纯前端的东西,json 是唯一通行的数据 DNA, 鄙人对 前端也是一窍不通啊,代码是可以看懂,但要真写起来,可能每行都要Google 下. 这不刚试用了  ActiveReports js 就遇到难题了,她的数据类型仅支持 json, 但我们原来的项目是

安装git,nodejs和yarn 安装Python27,3.x版本的不行,确保它在你的环境变量里: 安装gulp npm install --global gulp-cli 安装windows build tools: npm install --global windows-build-tools --vs2015 安装node-gyp npm install -g node-gyp 上面安装的一大堆东西,看似没无关,其实他们大都是用来编译原生nodejs插件的, nodejs的原生插件不是

最近一直有人在请教老K关于Linux系统相关问题,这里我就该问题做个详解,Linux系统一般有4个主要部分:内核.shell.文件系统和应用程序. 内核.shell和文件系统一起形成了基本的操作系统结构,它们使得用户可以运行程序.管理文件并使用系统.部分层次结构如图1-1所示.

基于vue3+electron11跨端仿制QQ桌面应用实战Vue3ElectronQchat. 使用vue3+electron+vuex4+ant-design-vue+v3scroll+v3layer等技术构建跨平台模仿QQ|TIM界面聊天应用.实现了发送富文本消息.图片/视频/链接预览.拖拽发送图片.调用dll截图.朋友圈等功能.支持多开窗口|父子modal窗口.换肤等操作. 一.技术栈 编码工具:vscode 框架技术:vue3.0+electron11.2.3+vuex4+vue-rou