electron和vue的关系

Posted 2023-03-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 项目主要有两个目的 vue@3.x 发布了，想试试新功能工作中用的 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 参考技术A 您好，Electron和Vue是一种前端技术，它们之间有着密切的联系。Electron是一个用于构建跨平台桌面应用的开源框架，它可以使用HTML，CSS和JavaScript来构建跨平台桌面应用。而Vue是一个轻量级的JavaScript框架，它可以用于构建单页面应用程序（SPA），它拥有简单的API，可以更快速地构建应用程序。

Electron和Vue之间的关系是，Electron可以使用Vue来构建跨平台桌面应用程序。Vue可以提供简单的API，可以更快速地构建应用程序，而Electron可以使用Vue来构建跨平台桌面应用程序，从而使开发者可以更快速地构建跨平台桌面应用程序。

此外，Electron和Vue之间还有一些其他的联系，比如Electron可以使用Vue来构建更加复杂的应用程序，而Vue可以帮助开发者更快速地构建应用程序，从而提高开发效率。此外，Vue还可以帮助开发者更好地管理应用程序的状态，从而使应用程序更加可靠。

总之，Electron和Vue之间有着密切的联系，它们可以搭配使用，从而更快速地构建跨平台桌面应用程序，并且可以更好地管理应用程序的状态，从而使应用程序更加可靠。参考技术B 您好，Electron和Vue是一种前端开发技术，它们之间有着密切的联系。Electron是一种桌面应用开发框架，它可以让开发者使用HTML、CSS和JavaScript来构建桌面应用程序。Vue是一种用于构建用户界面的框架，它可以帮助开发者更快地构建出功能强大的用户界面。Electron和Vue的结合可以让开发者更快地构建出功能强大的桌面应用程序，并且可以更好地管理应用程序的用户界面。Electron可以提供一个完整的桌面应用程序开发环境，而Vue可以提供一个强大的用户界面框架，这样就可以更好地构建出功能强大的桌面应用程序。此外，Electron和Vue还可以提供更好的性能，更快的开发速度，更好的可维护性，更容易的调试，更少的代码量，更高的可扩展性，以及更好的可移植性。因此，Electron和Vue的结合可以让开发者更快地构建出功能强大的桌面应用程序，并且可以更好地管理应用程序的用户界面。参考技术C electron是一个使用web技术创建跨平台桌面应用的框架，而vue是一个前端的JavaScript框架，用于开发灵活的web界面。
electron为vue提供了一种快捷的方式来运行和部署vue应用，可以在各种桌面操作系统上使用vue构建跨平台的桌面应用程序。这使得使用vue开发复杂的桌面应用变得更加容易。参考技术D 项目不同。electron-vue是vue-cli和electron结合的项目，electron是单独使用vue构建的项目，项目不同。
2、性质不同。Electron-vue是基于Vue来构造Electron应用程序的模板代码，Electron是使用JavaScript、HTML和CSS构建跨平台桌面的应用程序，性质不同

原创从零开始搭建Electron+Vue+Webpack项目框架预加载和Electron自动更新

导航：

（一）Electron跑起来
 （二）从零搭建Vue全家桶+webpack项目框架
 （三）Electron+Vue+Webpack，联合调试整个项目
 （四）Electron配置润色
 （五）预加载及自动更新
 （六）构建、发布整个项目（包括client和web）

摘要：到目前为止，我们的项目已经具备了PC客户端该有的一些基础功能和调试环境，但是总感觉缺了灵魂，那就是结合实际项目、实际业务的细节处理，缺着吧。。。这篇文章就介绍一下预加载和自动更新，文字功底有限，如有介绍的不清楚的地方，欢迎留言指正，或者跳过文字，直接去看代码，项目完整代码：https://github.com/luohao8023/electron-vue-template，随博客更新。

一、预加载

1、什么是预加载？什么场景能用到？　

preload String (可选) -在页面运行其他脚本之前预先加载指定的脚本 无论页面是否集成Node, 此脚本都可以访问所有Node API 脚本路径为文件的绝对路径。 当 node integration 关闭时, 预加载的脚本将从全局范围重新引入node的全局引用标志。

摘自electron官网的一段介绍，https://www.electronjs.org/docs/api/browser-window。

preload是BrowserWindow类的参数webPreferences的一个可选配置项，我们解读一下官网的介绍：

在页面运行其他脚本之前预先加载的指定的脚本：首先是个js文件没错了，再看加载时机，在页面运行其他脚本之前预先加载，这个页面不是普通的某个h5页面，而是指某个渲染进程（需要预加载js的渲染进程，因为渲染进程可能有多个，每个就是一个窗口），我们new一个BrowserWindow，打开了一个窗口，就是启动了一个渲染进程，如果我们不给这个窗口指定页面，那它就是空白的，如果指定了页面，那么窗口就会加载这个页面：

    const win = new BrowserWindow({
        width: 800,
        height: 600
    });
    win.loadURL(\'https://www.baidu.com\');

如上面代码，我们创建了一个窗口，然后加载百度首页，而preload脚本的加载时机就是窗口创建后，百度首页加载之前。如果有人问，如果不调用loadURL方法，不加载页面，preload脚本会加载吗？答案是会，但有什么用呢？你起个壳子不给人家看页面是什么鬼？不管这些，重要的是我们理解这个加载时机就好了；

无论页面是否集成Node，此脚本都可以访问所有Node API：首先要说明的一点是，Electron5.x以上版本，默认无法在渲染进程中访问Node API，如需使用，需要预先配置：

    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });

然后还要清楚一点，preload脚本是运行在渲染进程中的，可以仔细考虑一下。再有一点就是，preload脚本中可以访问window对象（渲染进程其实就是起了个浏览器壳子），preload脚本运行在渲染进程，提前于页面和其他所有js的加载，又能访问Node API；

脚本文件路径为绝对路径，当node integration关闭时，预加载的脚本将从全局范围重新引入node的全局引用标志：结合前面两点理解就好了。

那么，到底什么是预加载？用白话定义一下：

某一个渲染进程，在页面加载之前加载一个本地脚本，这个脚本能访问所有Node API、能访问window对象。用法如下：

    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, \'preload.js\')
        }
    });

理解应该差不多了，但什么场景能用到这玩意儿呢？按正常的逻辑来想，主进程启动后启动渲染进程，渲染进程加载页面就完事儿了，哪会用到这个preolad呢？

想一下，如果我们有以下场景：

a、如果我们启动了一个窗口（渲染进程），加载了一个线上的页面，本地没有页面文件，但要做一些错误处理，比如网络错误，页面加载失败，然后在页面空白但时候插入一些元素；

b、如果我们的一套代码部署在web端和客户端，需要用一个变量判断是在web端还是客户端；

...........

感觉举的例子好勉强啊，不要见怪，就是大概这么个意思，没准哪天就遇到了非preload解决不了的问题呢，毕竟这玩意儿还是有它的特殊之处的；

上面两个场景如果用preload来解决的话，思路是利用prelaod中能访问window对象的特点，比如b，代码中可以用window.isClient来判断是否在客户端，默认为false，然后在preload中把window.isClient设置为true，而对于部署在web端的代码来说，这个值就是false。

2、怎么用？

上面说了怎么引用preload脚本，现在说一下怎么写，下面开始xxoo乱写乱画了：

// 访问electron对象
const {
    remote,
    ipcRenderer
} = require(\'electron\');
// 访问node模块
const fs = require(\'fs\');
const path = require(\'path\');
// 访问window对象
window.isClient = true;
window.sayHello = function() {
    console.log(\'hello\');
};
// 操作dom
const div = document.createElement(\'div\');
div.innerText = \'I am a div\';
document.body.appendChild(div);
// ...

如果preoad里面逻辑比较复杂，有可能还要用webpack打包一下，单独拎出来打包就行了，webpack单文件打包，注意targer要"electron-renderer"：

/*
Tip:  preload 打包配置
 */
const path=require(\'path\');
const { dependencies } = require(\'../package.json\');
module.exports = {
    mode:process.env.NODE_ENV,
    entry: {
        preload:[\'./src/preload/index.js\']
    },
    output: {
        path: path.join(__dirname, \'../app/\'),
        libraryTarget: \'commonjs2\',
        filename: \'./[name].js\'
    },
    optimization: {
        runtimeChunk: false,
        minimize: true
    },
    node: {
        fs: \'empty\',
        __dirname:false
    },
    module: {
        rules: [
            {
                test: /\\.js$/,
                loader: \'babel-loader\',
                exclude: /node_modules/
            }
        ]
    },
    externals: [
        ...Object.keys(dependencies || {})
    ],
    resolve: {
        extensions: [\'.js\'],
        alias: {
            \'@\': path.resolve(__dirname, "../src"),
            \'@public\': path.resolve(__dirname, "../public")
        }
    },
    plugins:[],
    target:"electron-renderer"
}