首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

浅谈electron

src/main/index.js 这个文件是你应用程序的主文件,electron 也从这里启动。它也被用作 webpack 产品构建的入口文件。所有的 main 进程工作都应该从这里开始。...app/src/main/index.dev.js 这个文件专门用于开发阶段,因为它会安装 electron-debug 和 vue-devtools。...使用Electron的API Electron 在主进程和渲染进程中提供了大量 API 去帮助开发桌面应用程序, 在主进程和渲染进程中,可以通过require() 方法将其包含在模块中,以此获取 Electron...为了避免 Chromium 的限制以及对应用程序内部文件的改写,请确保使用 electron 的 API,特别是 app.getPath(name) 函数。...这个帮助函数可以使你获得指向系统目录的文件路径,如用户的桌面、系统临时文件 等等 electron - vue https://simulatedgreg.gitbooks.io/electron-vue

2.1K20

electron+vue全家桶开发包含(心得,遇见的坑,解决办法等)

*/ 创建主脚本文件 主脚本指定了您将运行主进程的 Electron 应用程序的入口点(通常情况下是 main.js 文件)【后续代码结构中会有示例说明】。...通常,在主进程中运行的脚本控制应用程序的生命周期,并显示图形用户界面及其元素。 执行本机操作系统交互,并在网页中创建渲染程序。 Electron 应用程序只能有一个主流程。...,首先需要引入他包含的模块 const electron = require('electron') 若要创建一个窗口,需要调用 ·浏览窗口· 类,并且只能在主进程中使用: const...应用程序需要在 CSS 中指定 -webkit-app-region: drag 来告诉 Electron 哪些区域是可拖拽的 在可拖拽区域内部使用 -webkit-app-region: no-drag...如果你也在做相关的项目欢迎交流下哈, electron +vue全家桶 + element-ui 项目搭建 新建项目 初始化项目 electron-vuevue-cli 和 electron

59010
您找到你想要的搜索结果了吗?
是的
没有找到

Electron入门教程1 —— 编写第一个桌面应用程序

所以此时我就想,既然移动app都能用vue来写,那Windows的桌面应用程序是不是也可以用Vue等web前端技术来开发呢?还真可以,那就是Electron这个框架。...在 Electron 中,浏览器窗口只能在app模块的ready事件触发后才会创建。您可以使用app.whenReady()等待此事件 。...因为不能在事件之前创建窗口,所以你应该只在你的应用程序ready之后。activate通过在现有whenReady()回调中附加事件侦听器来做到这一点。...预加载脚本在渲染进程被加载之前运行,并且可以访问渲染全局变量(例如窗口和文档)和Node.js环境。...== 'darwin') app.quit() }) 8.自定义js脚本的添加 此时,您可能想知道如何向您的应用程序添加更多的功能。对于任何与你想要的其他功能,你都需要添加js脚本到你的渲染过程中。

1.6K40

electron入门实战

Chromium​​ 并不具备原生 GUI​​ 的操作能力,因此 Electron​​ 内部集成 Node.js​​,编写 UI​​ 的同时也能够调用操作系统的底层 API​​,例如 path、fs、crypto...桌面游戏:Electron 提供了强大的图形渲染能力和硬件加速支持,使得开发者可以构建桌面游戏应用程序。...Electron Vue:如果 喜欢使用 Vue.js 进行开发,那么 Electron Vue 是一个不错的选择。...它提供了一个基于 Vue.jsElectron 开发模板,集成了许多常用的工具和插件,如 Vue Router、Vuex 等,使得开发 Electron 应用程序Vue.js 更加无缝衔接。...无论 是使用原生 JavaScript、React、Vue.js 还是其他前端框架,都可以找到相应的 Electron 脚手架来帮助 快速启动项目。

31370

Electron快速入门,聊聊跨进程通信那些事儿

Electron 开发中,页面不再是用户手动输入打开,而是开发着自主硬编码好的。 Electron应用程序主要分为主进程、渲染进程两个部分,即对应着右侧图中上下两个部分。...进程 一个 Electron 应用程序由一个主进程(有且只有一个) + 多个渲染进程组成。 主进程 功能:桥梁作用,连接操作系统和渲染进程,负责管理所有窗口及其对应的渲染进程。...内部的模块,渲染进程可以通过此模块访问到主进程的模块、对象和方法。...Vue Vue CLI Plugin Electron Builder:https://github.com/nklayman/vue-cli-plugin-eletron-builder electron-vue...jQuery,也是可以引用开发的,只是建议而已,这就涉及到 Electron 性能相关了,这里不再展开。

1.6K20

IM跨平台技术学习(十一):环信基于Electron打包Web IM桌面端的技术实践

主进程是 Electron 应用程序的核心,它运行在一个 Node.js 实例中,并管理应用程序的生命周期、窗口创建和销毁、与底层操作系统进行交互等。...主进程还可以通过 IPC(进程间通信)机制与渲染进程进行通信。渲染进程则是应用程序的 UI 界面所在的进程。每个 Electron 窗口都有其自己的渲染进程。...在 Electron 应用程序中,主进程通常写在名为 main.js 或者 index.js 的 JavaScript 文件中,这个文件是应用程序的入口点。...5.3有些 Electron 文件目录下 preload.js 的作用在 Electron 中,preload.js 文件是一个可选的 JavaScript 文件,用于在渲染进程创建之前加载一些额外的脚本或者模块...1)托管 Node.js API:preload.js 中可以引入 Node.js 模块,并将其暴露到 window 对象中,从而使得在渲染进程中也能够使用 Node.js API,避免了直接在渲染进程中调用

8510

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

app 是 Electron 的全局对象,用于控制整个应用程序的生命周期。...渲染进程集成内置模块 现在主进程内可以自由的使用 Electron 和 Node.js 的内置模块了,但渲染进程还不行,接下去我们就为渲染进程集成这些内置模块。...如果渲染进程的代码可以访问 Node.js 的内置模块,而且渲染进程加载的页面(或脚本)是第三方开发的,那么恶意第三方就有可能使用 Node.js 的内置模块伤害最终用户 。...设置 Vite 模块别名与模块解析钩子 虽然我们可以在开发者调试工具中使用 Node.jsElectron 的内置模块,但现在还不能在 Vue 的页面内使用这些模块。...渲染进程执行到:import fs from "fs" 时,就会请求这个目录下的 fs.js 文件,这样就达到了在渲染进程中引入 Node 内置模块的目的。

1.7K20

Spring Boot + Vue 如此强大?

然后,使用 npm install 命令安装项目所需要的依赖包,安装完成之后,可以使用 npm run dev 或 npm run build 命令运行 electron-vue 模版应用程序,运行效果如下图所示...Electron 应用程序分成三个基础模块:主进程、进程间通信和渲染进程。...index.js应用程序的主文件,electron 也从这里启动的,它也被用作 webpack 产品构建的入口文件,所有的 main 进程工作都应该从这里开始。...index.dev.js:此文件专门用于开发阶段,因为它会安装 electron-debug 和 vue-devtools。一般不需要修改此文件,但它可以扩展开发的需求。...渲染进程 renderer 是渲染进程目录,平时项目开发源码的存放目录,包含 assets、components、router、store、App.vue 和 main.js

15510

Spring Boot + Vue 也可以开发 CS 架构的应用,快来试试!

然后,使用 npm install 命令安装项目所需要的依赖包,安装完成之后,可以使用 npm run dev 或 npm run build 命令运行 electron-vue 模版应用程序,运行效果如下图所示...Electron 应用程序分成三个基础模块:主进程、进程间通信和渲染进程。...index.js应用程序的主文件,electron 也从这里启动的,它也被用作 webpack 产品构建的入口文件,所有的 main 进程工作都应该从这里开始。...index.dev.js:此文件专门用于开发阶段,因为它会安装 electron-debug 和 vue-devtools。一般不需要修改此文件,但它可以扩展开发的需求。...渲染进程 renderer 是渲染进程目录,平时项目开发源码的存放目录,包含 assets、components、router、store、App.vue 和 main.js

2K10

Spring Boot + Vue 如此强大?

然后,使用 npm install 命令安装项目所需要的依赖包,安装完成之后,可以使用 npm run dev 或 npm run build 命令运行 electron-vue 模版应用程序,运行效果如下图所示...Electron 应用程序分成三个基础模块:主进程、进程间通信和渲染进程。...index.js应用程序的主文件,electron 也从这里启动的,它也被用作 webpack 产品构建的入口文件,所有的 main 进程工作都应该从这里开始。...index.dev.js:此文件专门用于开发阶段,因为它会安装 electron-debug 和 vue-devtools。一般不需要修改此文件,但它可以扩展开发的需求。...渲染进程 renderer 是渲染进程目录,平时项目开发源码的存放目录,包含 assets、components、router、store、App.vue 和 main.js

58120

Spring Boot + Vue 如此强大?竟可以开发基于 CS 架构的应用

然后,使用 npm install 命令安装项目所需要的依赖包,安装完成之后,可以使用 npm run dev 或 npm run build 命令运行 electron-vue 模版应用程序,运行效果如下图所示...Electron 应用程序分成三个基础模块:主进程、进程间通信和渲染进程。...index.js应用程序的主文件,electron 也从这里启动的,它也被用作 webpack 产品构建的入口文件,所有的 main 进程工作都应该从这里开始。...index.dev.js:此文件专门用于开发阶段,因为它会安装 electron-debug 和 vue-devtools。一般不需要修改此文件,但它可以扩展开发的需求。...渲染进程 renderer 是渲染进程目录,平时项目开发源码的存放目录,包含 assets、components、router、store、App.vue 和 main.js

73520

Spring Boot + Vue 如此强大?竟然可以开发基于 CS 架构的应用

然后,使用npm install命令安装项目所需要的依赖包,安装完成之后,可以使用npm run dev或npm run build命令运行electron-vue模版应用程序,运行效果如下图所示。...Electron应用程序分成三个基础模块:主进程、进程间通信和渲染进程。...然而 Electron 允许用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些底层交互。 【主进程与渲染进程通信】 主进程使用 BrowserWindow 实例创建页面。...index.js应用程序的主文件,electron 也从这里启动的,它也被用作 webpack 产品构建的入口文件,所有的 main 进程工作都应该从这里开始。...渲染进程 renderer是渲染进程目录,平时项目开发源码的存放目录,包含assets、components、router、store、App.vue和main.js

1.2K30

Electron实战之环境搭建

src/background.js:这个文件就是 Electron 的主进程的入口文件,它是应用程序的入口点,负责管理整个应用的生命周期、创建窗口、原生 API 调用等。...src/main.js渲染进程的入口文件,就是我们通常写的 Vue 前端代码的入口。 1.3 目录结构优化 接下来,我们对主进程和渲染进程进行一些优化,目的是方面后期项目的扩展。...然后再把之前和 Vue 相关的渲染进程的文件以及文件夹全部迁移到了 renderer 目录下。...同时,目录调整后,我们需要重新修改一下 vue.config.js 的编译配置: // vue.config.js const { defineConfig } = require('@vue/cli-service...三、主进程启动项目 不管是通过 vue-cli-plugin-electron-builder 创建还是通过 electron-vite 创建的项目,都需要通过唯一的主进程进行应用程序的启动。

7100

vue 打包桌面应用 并发布

打包桌面应用程序 你说为啥现在前端这么累,一会做h5网页,一会pc网站,一会又是服务端渲染,一会又来一个桌面应用,一会又是App,是不是就差操作数据库了,,不对,如果你是走的node 方向,那你就做到了...vue 之后再去复制到哪个js里面去修改地址,所以我接下来提供的方式是直接在 vue 项目中引入 然后打包,然后运行,然后发布,好了,首先,你得在你得vue项目中 用npm 或cnpm 的形式引入这2个命令...npm install electron --save-dev npm install electron-builder --save-dev /* * 这个代码的意思是引入这个打包的js..."electron_dev": "npm run build && electron build/electron.js", "electron_build": "electron-packager...如果出现这个了,恭喜了,vue打包桌面应用程序已经完成了,但是你这个要是想发给别人安装看,你这个还不行哟,还需要进行打包才能哟,推荐一个简单的 看完另一篇新博客有讲解 https://blog.csdn.net

1.5K40

客户端开发(Electron)认识窗口

Dear,大家好,我是“前端小鑫同学”,长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。...Node.js环境: nodeIntegration 是否启动Node.js,默认启用 nodeIntegrationInWorker web worker中是否启动Node.js,默认启用...nodeIntegrationInSubFrames iframe是否支持Node.js,默认启用 扩展渲染进程能力: preload 指定预加载的脚本文件 webSecurity...的App.vue中通过html标签来绘制我们的标题栏,绘制后的结果如下图所示: 为标题栏的按钮增加事件: 按钮事件和调用函数的定义均与Vue一致,我们需要考虑的是如何与Electron联通来调用对应的...API: 调整窗口对象中的如下所示属性,切记启用remote: 在App.vue中导入electron对象: const { remote } = window.require('electron')

5.1K60

如何用Vue开发Electron桌面程序? 这篇就够了!

使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序 1....特点 跨平台 可以打包成Mac、Windows 和 Linux三个平台的应用程序 简化桌面端开发 (1)Electron 基于 Chromium 和 Node.js,可以使用 HTML, CSS 和...渲染进程中如何使用NodeJS api 需要在 vue.config.js 中配置 nodeIntegration 为 true module.exports = { pluginOptions:...打包问题 参考文档: https://www.electron.build/configuration/nsis 使用nsis打包windows程序的安装包 在 vue.config.js 中配置打包配置...软件更新 使用electron-updater ① 配置vue.config.js 设置publish配置, 配置了这个配置后, 打包后会生成一个latest.yml文件, 需要将其和安装包放在服务器同一目录下

5.1K63

打算一个卡片记忆软件,全平台架构如何选型?

优秀的性能:Flutter通过自带的渲染引擎Skia实现了高性能的渲染,能够提供流畅的用户体验。...内存占用较高:Electron 应用程序通常会占用较多的内存,这可能会影响应用程序的性能和资源消耗。...uni-app Uni-app 是一个基于 Vue.js 的跨平台应用框架,可以用于快速开发多端应用,包括H5、小程序、Android、iOS等。...Vue.js 技术栈:Uni-app 基于 Vue.js,这意味着前端开发者可以直接应用他们的 Vue.js 技能来构建多端应用程序,无需学习新的语言或工具。...总的来说,Uni-app 是一个强大的跨平台应用框架,能够帮助开发者使用 Vue.js 技术栈来快速构建多端应用程序

30610

Electron是什么以及可以做什么

---- 经济学中的“有需求就有市场”,在技术领域也例外,Electron 是应需求而生的,Electron 面世之后,非但满足了现有大部分的开发需求,还创造了大量的新需求,开辟了一个新的生态。...桌面 GUI 应用也例外,近几年两个重量级框架 NW.jsElectron横空出世,给前端开发人员打开了这个领域的大门。...Electron 的原理 Electron 是一个集成项目,它做了如下几个重要的工作: 订制 Chromium,并把订制版本的 Chromium 集成在 Electron 内部 订制 Node.js,并把订制版本的...Node.js 集成在 Electron 内部 通过消息轮训机制打通 Node.js 和 Chromium 的消息循环 通过 Electron 的内置模块向开发者提供桌面应用开发必备的 API Electron...我们应该清楚这些模块的势力范围,不能在主进程中使用渲染进程的模块,反之也不行。

2.9K30
领券