electron-vue 快速入门

介绍

准备重构BilibiliVideoDownload,就开始学习electron，再加上自己是vue技术栈就选用了electron-vue

electron-vue官网：点击访问

electron官网：点击访问

搭建

使用vue init确保安装@vue/cli @vue/cli-init

# 安装脚手架样板代码
vue init simulatedgreg/electron-vue my-project

# 安装依赖并运行你的程序
cd my-project

yarn # 或者 npm install

yarn run dev # 或者 npm run dev

踩坑

• npm install 阶段遇到了electron安装超时的问题，有两种方法解决
  1. 安装cnpm运行cnpm install
  2. 设置npm代理
• npm run dev 阶段遇到了process is not defined
  1. 删除node_modules 安装10.x.x版本的node，我本地是12.0.0，通过n模块安装的10.16.0 实现两个版本node共存。
  2. 按照issues里面的做法，会导致其他问题，最稳定的就是降低自己的node版本到10.x.x

技术细节

主进程和渲染进程

介绍

Electron 运行 package.json 的 main 脚本的进程被称为主进程。 在主进程中运行的脚本通过创建web页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。

由于 Electron 使用了 Chromium 来展示 web 页面，所以 Chromium 的多进程架构也被使用到。 每个 Electron 中的 web 页面运行在它自己的渲染进程中。更多

通信

使用ipcRenderer和ipcMain 模块可以实现通信

下面是一个打开系统资源管理器的例子

渲染进程：

import { ipcRenderer } from 'electron'

openSelectDir() {
  ipcRenderer.send('open-directory-dialog','openDirectory');
  ipcRenderer.on('selectedItem',(e,path) => {
    console.log(path);
  })
}

主进程：

import { dialog, ipcMain } from 'electron'

ipcMain.on('open-directory-dialog',(e,p) => {
  dialog.showOpenDialog({properties: [p]},files => {
    e.sender.send('selectedItem', files[0])
  })
})