(原)Electron+vue 应用实战

Wesley13
• 阅读 1038

1.electron架构思考

在做electron桌面开发中,Electron+vue当下算是性价比的比较高的。但是electron算是小众开发,遇到问题,基本上就是掉进深坑,爬好久才出来。

为了做一个项目,我翻遍了国内好多网站。看到一篇好的文章。Electron 应用实战 (架构篇) 这篇还是很值得好好看看

其中一句话,我觉得讲的很有道理====》数据通讯方案决定整体的架构方案。

原因:Electron 有两个进程,分别为 main 和 renderer,而两者之间需要进行通讯,通讯机制不同。

1. 方案1 只是简单的通信,没有大数据量通信。

通常采用本身的自带方案,ipc方式   main 端有 ipcMain,renderer 端有 ipcRenderer,分别用于通讯。

缺点:不支持大数据通信和复杂的业务逻辑

2.用remote模块渲染进程直接调用主进程的进程

remote模块官方文档 https://electronjs.org/docs/api/remote

例如

主进程:

// 主进程 mapNumbers.js
exports.withRendererCallback = (mapper) => {
  return [1, 2, 3].map(mapper)
}

exports.withLocalCallback = () => {
  return [1, 2, 3].map(x => x + 1)
}

 渲染进程

// 渲染进程
const mapNumbers = require('electron').remote.require('./mapNumbers')
const withRendererCb = mapNumbers.withRendererCallback(x => x + 1)
const withLocalCb = mapNumbers.withLocalCallback()

console.log(withRendererCb, withLocalCb)
// [undefined, undefined, undefined], [2, 3, 4]  

3.Electron+vue一渲染进程直接调用主进程的方法

3.1创建项目

vue init simulatedgreg/electron-vue my-project

3.2安装依赖

npm install

3.3产生目录结构

(原)Electron+vue 应用实战

project/
├── main
│   ├── foo.js
│   └── index.js
└── renderer
    └── main.js

└── components

└── landingPage.vue

└── .electron-vue

└── webpack.main.config.js

3.4主进程=>创建 foo.js

module.exports = {
    getTest1(){
        return 'test1';
    },
    getTest2(){
        return 'test2';
    },

    }

3.4渲染进程=>main.js

import Vue from 'vue'
import axios from 'axios'
import App from './App'
import router from './router'
import store from './store'

//引入foo主进程
const foo = require('electron').remote.require('./foo');

//将 foo 挂载到 vue 的原型上
Vue.prototype.foo = foo;

3.5 landingPage.vue

<script>
  export default {
    methods: {
      clickMethodInMainProcess() {

           console.log('\n\n------ begin:  ------')

           console.log(this.foo.getTest1())
           console.log(this.foo.getTest2())

           console.log('------ end:  ------\n\n')
      }
  }
</script>el

3.6 webpack增加新entry

在 .electron-vue/webpack.main.config.js 添加新entry

 a good solution by editing the webpack.main.config.js and manually adding every relative module as new entries.

let mainConfig = {
  entry: {
    main: path.join(__dirname, '../src/main/index.js'),
    foo: path.join(__dirname, '../src/main/foo.js')
  },
}

参考:

https://github.com/SimulatedGREG/electron-vue/issues/291

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Docker 部署SpringBoot项目不香吗?
  公众号改版后文章乱序推荐,希望你可以点击上方“Java进阶架构师”,点击右上角,将我们设为★“星标”!这样才不会错过每日进阶架构文章呀。  !(http://dingyue.ws.126.net/2020/0920/b00fbfc7j00qgy5xy002kd200qo00hsg00it00cj.jpg)  2
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这