electron和vue的关系

在electron-vue的配置中，主进程就是v8引擎，可以看成是一个浏览器； 渲染进程就是网页。可以在主进程中，导入url指向的html，可以认为是一个自定义的浏览器在加载网页。

（2）但是在渲染进程中的html页面中，是node环境，不再是html环境。这意味着，会拥有打开本地文件，访问数据库，没有跨域限制的网路访问等。

文章知识点与官方知识档案匹配

Vue入门技能树首页概览

25500 人正在系统学习中

点击阅读全文

打开CSDN APP，看更多技术内容

Electron+Vue开发环境的搭建教程2(直接使用electron-vue创建项目)

1,初始化项目 (1)首先执行如下命令使用 electron-vue 模版创建一个集成了 Vue 以及 Electron 的工程项目,项目名我这里叫做 vue_electron_demo 1 vue init simulatedgreg/electron-vue vue_electron_demo (2)在这期间会提示我们输入或选...

继续访问

vue3+electron开发桌面软件入门与实战(2)——创建electron+vue3框架...

前面的文章讲解的知识点涵盖:electron项目创建,vue3+vite项目创建,vue+electron项目简单集成,我们也在前面明言,这种集成方案是很原始的,只能做最简单的项目,或者自己做个玩具,真正项目中并不建议。

继续访问

electron-vue-vite:Electron、vue3、vite2、ant-design-vue2 整合

electron-vue-vite Electron + vue3 + vite2 + ant-design-vue2 整合 :bug: 已知问题 项目打包后仍有问题 待解决... 暂时通过集成 webpack 解决打包问题 How and Why 写这个 Demo 项目主要有两个目的 [email protected] 发布了，想试试新功能 工作中用的 umi+electron 项目大了，启动速度并不理想； 用 vite 试试，算一个储备方案 ^_^ Command npm run dev npm run build 如果只需要最基础的集成 Demo 请使用 或 分支 Note 踩坑记 import { write } from 'fs' 的这种形式会被 vite 编译成 /@modules/fs?import const { write } = require('fs') 这种形式就能用了 :winking_face: const {

Electron: 主进程开启子线程 cluster.fork

1.background.js const cluster = require('child_process')var son_course = cluster.fork(process.env.NODE_ENV == "development" ? "./src/renderer.js" : "./resources/renderer.js") //向子线程发生消息 son_course.send("我是你粑粑~~~") //接收子线程的消息 son_course.on('message',..

继续访问

electron-vue 项目创建及常见问题_--·的博客

electron-vue项目创建,此文章建立在已有electron环境的基础上 0 electron环境搭建 正常情况: npminstallelectron -g 1 有时,因为网络等原因,此步骤会执行报错 那么改用cnpm的方式安装 首先安装cnpm: ...

继续访问

Electron: 渲染进程开启子线程 Worker_一个头发贼多的小火鸡的博客-CS...

Electron: 渲染进程开启子线程 Worker 在Vue中需要使用例外的线程去执行轮询的任务,这里以获取网卡信息为例。 注:这里是在Electron中使用的,可以使用Node.js实例 “child_process”,如果是纯Vue工程无法使用Node实例。

继续访问

electron-vue-next:将vue-next与电子结合使用的入门模板

概述 该存储库包含用于将vue-next与最新电子一起使用的入门模板。 我开始通过伟大的计划学习电子和 。 这个项目也从中得到启发。 您可以在查看文档。 同样，我们也有。 特征 电子11 遵循电子指南，使渲染器仅在浏览器环境中处理 使用进行构建 授权及其生态系统 使用意味着开发渲染器过程可以非常快！ 将与强类型状态，获取器和提交一起使用 使用 默认情况下将与Javascript Standard结合使用 内置TypeScript支持在使用 （与vite对齐）来构建主流程打字稿代码 带有Github Release的Github Action是开箱即用的 如果遵循，则package.json中的自动凹凸版本并生成CHANGELOG.md 在“发布过程”部分中详细说明这项工作 很好地集成VSCode 支持通过vscode调试器在main / renderer进程中调试.ts /

Electron启动和基础应用

基础信息 界面启动 界面启动 : mainWindow.LoadFile 启动页面的渲染进 读取页面布局和演示 主进程可以打开无数个子进程 IPC在主进程执行任务并获取信息 //启用所有node下的资源为可用状态 webPreferences:{nodeIntegration:true} accelerator 快捷键 //开启调试 Window.WebContents.OpenDevTools()var {Shell} = require('electron')//在浏览器中打开URL

继续访问

2022年最新Vue+electron项目创建_vue electron_GIS_宇宙的博客-CSDN博 ...

1.点击创建项目 2.命名项目、选择你的包管理工具 3.选择手动配置 4.勾选你需要的东西,这里我多选了路由和vuex 5.最后就是选择你的vue版本和下面那个我随便选的 6.添加electron插件 创建完项目后,进入项目然后再插件管理中选择添加插...

继续访问

electron+vue项目简单创建

当具有electron和vue的基础知识后，可以创建基于vue的electron项目 electron-vue 充分利用 vue-cli 作为脚手架工具，加上拥有 vue-loader 的 webpack、electron-packager 或是 electron-builder，以及一些最常用的插件，如vue-router、vuex 等等。 在项目里已完成vue-cli脚手架的环境后： 1. 新...

继续访问

最新发布 vue3+electron开发桌面软件入门与实战（1）——创建electron+vue3主体项目

因为vue项目的默认入口文件是index.html，eletron项目的默认入口文件是main.js，所以这里我们就要解决两个框架搭配时，以哪个文件为入口。这个问题的答案可能很简单，但是其实体现的是vue和electron的关系。如果你仔细阅读electron官网并思考过，应该已经理解electron项目运行时，相当于是一个壳，壳里面集成了nodejs、v8引擎等必须的环境。

继续访问

热门推荐 Electron+vue的使用

electron+vue的结合使用。 1.Electron是什么？？ Electron相当于一个浏览器的外壳，可以把网页程序嵌入到壳里面，可以运行在桌面上的一个程序，通俗来说就是软件，比如像QQ、优酷、网易音乐等等。可以构建跨平台桌面程序，本身支持node.js，可以使用node.js的一些模块。 Electron官网：https://electronjs.org/ 2.Electron+vue的联合使用 1、 有vue基础跟nodejs基础的开发人员使用electron那就更顺风顺水了，没有node基

继续访问

Electron笔记三：调用外部程序（子进程管理）

1.安装child_process npm installchild_process --save 2.功能实现 main.js中添加 //打开一个子进程 constmyChildProccess=require('child_process')myChildProccess.spawn('C:\\ProgramFiles\\Notepad++\\notepad++.exe')npm start 运行看结果,发现notepad++.exe已经被运行起来了 3....

继续访问

Electron学习-主进程与渲染进程（2021.1.25&1.28）

注意： 真的从0开始，只有一点C/C++基础，所以js这方面完全是真·零基础，完全亦步亦趋跟着老师走的。看的是b站上“技术胖”老师的视频，学成必谢555(老师的网站是jspang.com,视频、文章都是免费的，太良心了555) 之前的学习记录都在电脑里，之后有空慢慢传上来 学的是electron，用的是vs code 写这个的主要目的是怕自己之后忘了，方便捡起来 --学习内容： 1.Electron的运行流程 读取package.json中的入口文件 "main": "index.js",

继续访问

Electron子进程开启Koa微服务(Koa + Sqlite3)

Electron 配合 Koa 实现带有本地微服务的桌面应用。Sqlite3数据库负责持久化数据。本文是实践过程中的经历和问题总结。

继续访问

electron-vue 开发(三)——点击提交按钮创建子窗口

electron-vue 开发(三)——创建窗口 创建窗口

继续访问

electron-v8.2.1-win32-x64.zip 下载失败（npm install electron 安装失败）

npm 安装 electron 依赖时下载失败（或下载缓慢）的解决方案 electron-v8.2.1-win32-x64.zip 下载失败 淘宝npm镜像：https://npm.taobao.org/mirrors/electron 以官网demo举例 克隆项目 git clone https://github.com/electron/electron-quick-start 进入仓库 c...

继续访问

electron中使用node的子进程创建本地的web server

刚开始，是要在别的框架中使用node，创建本地服务器 首先要有个server.js const http = require('http')//const hostname = '127.0.0.1'//可以不写，或者写localhost const port = 7888// 通过 createServer 创建 web服务器 const server = http.creat...

继续访问

【Electron+Vue】【一】开发跨平台桌面应用了解+构建

目录 基础综合介绍： 环境搭建： 安装Electron Electron应用程序分成三个基础模块：主进程、进程间通信和渲染进程。 【主进程】 【渲染进程】 【主进程与渲染进程通信】 src目录结构 main目录 渲染进程 qq音乐播放器 网易云音乐 其他基于 ELECTRON-VUE 的作品 基础综合介绍： 虽然B/S是目前开发的主流，但是C/S仍然有很大的市场需求。受限于浏览器的沙盒限制，网页应用无法满足某些场景下的使用需求，而桌面应用可以读写本地文件、调用更多系统资源，..

继续访问

Vue框架开发Electron7 - 主进程和渲染进程通讯

第一种通信方法： 在vue框架中要有主进程和渲染进程，每个进程都有个we

一，打开子进程窗口；首先自己写好自己的vue页面，我这里写好的页面的名字是 zchildern；然后把页面引入路由里面，把路由的模式改成哈希模式1，在要触发的vue页面事件中这样写：const ipc = require('electron').ipcRendereripc.send('add')2，在background.js中接受触发的事件；首先引入 ipcMain；接收：（图下面是代码）const path = require('path')const url = require('url')const winURL = process.env.NODE_ENV === 'development'? 'http://192.168.2.184:3000': `file://${__dirname}/index.html`// 上边这段代码主要是用来解决vue路由访问页面的问题，端口号是vue启动的默认端口号，如果有需要可以自行修改ipcMain.on('add',()=>{let newwin = new BrowserWindow({width: 350,maxWidth:350, //配置窗口的最大尺寸minWidth:350, //配置窗口的最小尺寸height: 500,maxHeight:500,frame:false,modal: true, //配置子窗口是模态窗口movable:false,//窗口能否可以被移动；true or false，默认值为 trueparent: win, //win是主窗口webPreferences: {nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,webSecurity: false, // 是否禁用浏览器的跨域安全特性}})newwin.loadURL(winURL + '#/zchildren')// newwin.loadURL(path.join('file:',__dirname,'zchildren'))//new.html是新开窗口的渲染进程newwin.on('closed',()=>{newwin = null})})

本节我们来学习什么是主进程和渲染进程，主进程与渲染进程之间有什么区别，主进程和渲染进程之间的通信。下面我们先来看一下进程的概念。

进程（Process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配和调度的基本单位，是 *** 作系统结构的基础。

在 Electron 中，启动项目时运行的 main.js 脚本就是我们说的主进程。在主进程运行的脚本可以以创建 web 页面的形式展示 GUI 。

一个 Electron 应用有且只有一个主进程。并且创建窗口等所有系统事件都要在主进程中进行。

由于 Electron 使用 Chromium 来展示页面，所以 Chromium 的多进程结构也被充分利用。每个 Electron 的页面都在运行着自己的进程，这样的进程我们称之为渲染进程。

也就是说每创建一个 web 页面都会创建一个渲染进程。每个 web 页面都运行在它自己的渲染进程中。每个渲染进程是独立的，它只关心它所运行的页面。

主进程使用 BrowserWindow 实例创建网页。每个 BrowserWindow 实例都在自己的渲染进程中运行。当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。

主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互独立的，并且只关心他们自己的网页。

Electron 在主进程和渲染进程中提供了大量 API 去帮助开发桌面应用程序， 在主进程和渲染进程中，可以通过 require() 方法将其包含在模块中，以此获取 Electron 的 API 。

引入 electron ：

所有 Electron 的 API 都被指派给一种进程类型。许多 API 只能被用于主进程或渲染进程中，但其中一些 API 可以同时在上述两种进程中使用。 每一个 API 的文档都将声明我们可以在哪种进程中使用该 API 。

Electron 中的窗口是使用 BrowserWindow 类型创建的一个实例， 它只能在主进程中使用，如下所示：

Electron 的主进程是在后台运行，对应 main.js 文件。而渲染进程是前端看到的，对应 index.html 文件。这个两个进程之间的通信首选 ipc 方式，因为它会在完成时返回，而不会阻止同一进程中的其他 *** 作。

异步通信，在发送消息之后，不会阻止同一进程中程序的继续运行。下列示例渲染进程发送异步消息 ping 到主进程，然后主进程回答 pong 。

渲染器进程：

主进程：

除了以异步方式在进程之间发送消息，我们还可以使用 ipc 模块在进程之间发送同步消息，但是此方法的同步特性意味着它在完成任务时会阻止其他 *** 作。

渲染器进程：

主进程：

链接： https://www.9xkd.com/

---