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
*/ 创建主脚本文件 主脚本指定了您将运行主进程的 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-vue 是 vue-cli 和 electron
所以此时我就想，既然移动app都能用vue来写，那Windows的桌面应用程序是不是也可以用Vue等web前端技术来开发呢？还真可以，那就是Electron这个框架。...在 Electron 中，浏览器窗口只能在app模块的ready事件触发后才会创建。您可以使用app.whenReady()等待此事件 。...因为不能在事件之前创建窗口，所以你应该只在你的应用程序ready之后。activate通过在现有whenReady()回调中附加事件侦听器来做到这一点。...预加载脚本在渲染进程被加载之前运行，并且可以访问渲染全局变量(例如窗口和文档)和Node.js环境。...== 'darwin') app.quit() }) 8.自定义js脚本的添加 此时，您可能想知道如何向您的应用程序添加更多的功能。对于任何与你想要的其他功能，你都需要添加js脚本到你的渲染过程中。
Chromium 并不具备原生 GUI 的操作能力，因此 Electron 内部集成 Node.js，编写 UI 的同时也能够调用操作系统的底层 API，例如 path、fs、crypto...桌面游戏：Electron 提供了强大的图形渲染能力和硬件加速支持，使得开发者可以构建桌面游戏应用程序。...Electron Vue：如果 喜欢使用 Vue.js 进行开发，那么 Electron Vue 是一个不错的选择。...它提供了一个基于 Vue.js 的 Electron 开发模板，集成了许多常用的工具和插件，如 Vue Router、Vuex 等，使得开发 Electron 应用程序与 Vue.js 更加无缝衔接。...无论 是使用原生 JavaScript、React、Vue.js 还是其他前端框架，都可以找到相应的 Electron 脚手架来帮助 快速启动项目。
而 Electron 开发中，页面不再是用户手动输入打开，而是开发着自主硬编码好的。 Electron应用程序主要分为主进程、渲染进程两个部分，即对应着右侧图中上下两个部分。...进程 一个 Electron 应用程序由一个主进程（有且只有一个） + 多个渲染进程组成。 主进程 功能：桥梁作用，连接操作系统和渲染进程，负责管理所有窗口及其对应的渲染进程。...内部的模块，渲染进程可以通过此模块访问到主进程的模块、对象和方法。...Vue Vue CLI Plugin Electron Builder：https://github.com/nklayman/vue-cli-plugin-eletron-builder electron-vue...jQuery，也是可以引用开发的，只是不建议而已，这就涉及到 Electron 性能相关了，这里不再展开。
主进程是 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，避免了直接在渲染进程中调用
app 是 Electron 的全局对象，用于控制整个应用程序的生命周期。...渲染进程集成内置模块 现在主进程内可以自由的使用 Electron 和 Node.js 的内置模块了，但渲染进程还不行，接下去我们就为渲染进程集成这些内置模块。...如果渲染进程的代码可以访问 Node.js 的内置模块，而且渲染进程加载的页面（或脚本）是第三方开发的，那么恶意第三方就有可能使用 Node.js 的内置模块伤害最终用户 。...设置 Vite 模块别名与模块解析钩子 虽然我们可以在开发者调试工具中使用 Node.js 和 Electron 的内置模块，但现在还不能在 Vue 的页面内使用这些模块。...渲染进程执行到：import fs from "fs" 时，就会请求这个目录下的 fs.js 文件，这样就达到了在渲染进程中引入 Node 内置模块的目的。
然后，使用 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。
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 创建的项目，都需要通过唯一的主进程进行应用程序的启动。
然后，使用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。
打包桌面应用程序 你说为啥现在前端这么累，一会做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
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')
使用 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文件, 需要将其和安装包放在服务器同一目录下
所以这里学学electron-vue的基础知识，首先认识下工程目录构成。 ? 目录结构 开发主进程：src/main/index.dev.js，开发主进程入口。该文件专门用于开发和安装开发工具。...最后跳转到src/main/index.js。...渲染器进程（renderer目录）：Electron 中的每个网页都在自己的进程中运行，称为渲染器进程 (renderer process)。...vue路由：鼓励使用 vue-router创建 单页应用程序 。...参考 electron-vue文档： https://simulatedgreg.gitbooks.io/electron-vue/content/cn/
最终效果如下： 主页： 编辑页： 项目引入Electron 笔者的项目是基于Vue2.x + Vue Cli开发的一个单页应用，路由用的是hash模式，引入Electron很简单，也不需要做啥大改动...，直接使用vue-cli-plugin-electron-builder插件： vue add electron-builder 然后启动服务： npm run electron:serve 就会在Vue...另外可以看到在创建窗口时指定了一个文件preload.js，这个文件是渲染进程和主进程的通信桥梁。...预加载脚本会在渲染器进程加载之前加载，并有权访问：两个渲染器全局对象 ( window 和 document) 、Node.js 环境。...:build": "vue-cli-service electron:build -p never", "electron:build-all": "vue-cli-service electron
优秀的性能：Flutter通过自带的渲染引擎Skia实现了高性能的渲染，能够提供流畅的用户体验。...内存占用较高：Electron 应用程序通常会占用较多的内存，这可能会影响应用程序的性能和资源消耗。...uni-app Uni-app 是一个基于 Vue.js 的跨平台应用框架，可以用于快速开发多端应用，包括H5、小程序、Android、iOS等。...Vue.js 技术栈：Uni-app 基于 Vue.js，这意味着前端开发者可以直接应用他们的 Vue.js 技能来构建多端应用程序，无需学习新的语言或工具。...总的来说，Uni-app 是一个强大的跨平台应用框架，能够帮助开发者使用 Vue.js 技术栈来快速构建多端应用程序。
---- 经济学中的“有需求就有市场”，在技术领域也不例外，Electron 是应需求而生的，Electron 面世之后，非但满足了现有大部分的开发需求，还创造了大量的新需求，开辟了一个新的生态。...桌面 GUI 应用也不例外，近几年两个重量级框架 NW.js和 Electron横空出世，给前端开发人员打开了这个领域的大门。...Electron 的原理 Electron 是一个集成项目，它做了如下几个重要的工作： 订制 Chromium，并把订制版本的 Chromium 集成在 Electron 内部 订制 Node.js，并把订制版本的...Node.js 集成在 Electron 内部 通过消息轮训机制打通 Node.js 和 Chromium 的消息循环 通过 Electron 的内置模块向开发者提供桌面应用开发必备的 API Electron...我们应该清楚这些模块的势力范围，不能在主进程中使用渲染进程的模块，反之也不行。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
