vue引用electron_如何搞定跨平台桌面开发？Electron助你快速起步

嗨，我是勾勾。今天要介绍的是 Electron 跨平台桌面应用开发。

Electron（https://electronjs.org/）是一个运行平台，它能够让我们通过 HTML + CSS + JavaScript 开发桌面应用程序。

核心原理就是 Electron 中将 Chromium（Chrome 的内核）和 Node.js 打包到了一起，通过 Chromium 提供 WebView 从而实现 UI 编程能力，通过 Node.js 提供 APIs 从而实现系统接口调用。

简单来说就是，在 Electron 中我们可以像在 Web 开发中一样，通过 HTML + CSS 完成 UI 开发，通过 JavaScript（ECMAScript）调用 APIs 实现业务功能，只不过这里的 APIs = Web APIs + Node APIs。

快速上手

一个最基本的 Electron 项目需要有如下的几个必要文件：

your

与 Web 所不同的是，这里 Electron 启动的入口是 JavaScript 文件，也就是这里的 main.js 文件（简单示例）。

// main.js

在这个 JavaScript 文件中创建页面窗口用于加载所需要在界面上显示的页面文件 index.html。更完整的 main.js 应该如下：

const

index.html 中可以是任何你想要呈现的内容。你也可以使用不同的库和框架，这与 Web 中没什么两样，所不同的是，当你 BrowserWindow → webPreferences → nodeIntegration 设置为 true 时，你可以在页面的脚本中使用 Node APIs。这看起来非常棒，但是要小心使用这个特性，因为如果你加载的不是本地的脚本，那就存在风险。

案例：文件编辑器

为了体现 Electron 的能力，我们通过一个简单的记事本应用案例来感受。

克隆基础项目结构代码：

安装项目依赖的模块：

$ yarn # or npm install

页面结构与样式：

<!--

页面脚本文件 renderer.js：

// renderer.js

当然 Electron 模块中提供了更合适的 APIs，用于提示用户保存文件位置、让用户选择打开某个文件：

const

注意事项：

在渲染进程中使用 Node APIs 需要开启当前 BrowserWindow 的 nodeIntegration（针对 Electron 5 以上版本）。
由于渲染进程是运行在 Chromium 中的，所以不管是样式还是脚本都不需要考虑兼容其他环境问题，你可以放心大胆的使用新特性。

通过以上的示例，我们应该就可以体会到 Electron 开发的过程，以及 Electron 的内部组成。

主进程与渲染进程

Electron 中有两种进程类型，分别为「主进程」和「渲染进程」，它们的职责和能力各不相同：

通过 Electron 直接启动运行的脚本，运行这个脚本的进程被称为「主进程」。一个 Electron 应用总是有且只有一个主进程。一般我们都会在这个进程中管理整个应用，所以我个人也把它称之为「调度进程」。

通过 BrowserWindow 创建的页面窗口运行在单独的进程当中，称之为「渲染进程」。负责展示页面以及运行页面上所需要的脚本。

With Framework

接下来我们再来了解一下，如何配合使用 React.js 或者 Vue.js 这样的 UI 框架开发 Electron 应用。

如果你不需要使用 JSX 或者单文件组件这些特性，你可以直接把这些框架当作库，直接在页面中使用。

当然，就现阶段来说，大家很自然的会把这些有特性和框架捆绑，总是用 A 就必须要用 B，所以这里还是需要推荐给大家一个我觉得非常方便的集成环境。

electron-webpack

electron-webpack 其实是一个通过 webpack 编译 Electron 代码的集成工具，通过简单的配置就可以支持 React.js 和 Vue.js，当然你也可以让它支持更多。

electron-webpack：

https://github.com/electron-userland/electron-webpackgithub.com

它要求你有通过特定的项目结构编写代码：

my

我们可通过官方提供的模板快速创建这样结构的项目：

这个项目中提供了一些有用的 scripts：

使用 Vue.js

由于 electron-webpack 中会自动加载 Vue.js 所需的 loader，所以只需要安装对应的模块，Vue.js 单文件组件将自动工作。

yarn add vue electron-webpack-vue --dev

使用 React.js

同理，React.js 的工作也只需要安装相应的模块：

yarn add react react-dom @babel/preset-react --dev

打包和发布

我们可以使用类似 electron-builder（https://www.electron.build）的一些集成工具轻松完成跨平台打包任务。

刚刚介绍的 electron-webpack 的初始项目模板中就包含了此工具的使用。

最近在重写一个基于 Vue.js + TypeScript 的 Electron 骨架项目，如需自取：

https://github.com/zce/electron-boilerplategithub.com

本文转载自公众号：勾勾的前端世界

收获更多前端技术，欢迎来找勾勾交流