前言虽然B/S是目前开发的主流，但C/S仍然有很大的市场需求。受浏览器沙箱的限制，Web应用在某些场景下无法满足使用需求，而桌面应用可以读写本地文件，调用更多的系统资源，再加上Web开发成本低、效率高的优势，这种交叉平台方法在开发人员中越来越受欢迎。Electron是一个基于Chromium和Node.js的跨平台开发框架，使用HTML、CSS和JavaScript构建跨平台应用程序，兼容Mac、Windows和Linux。目前，Electron已经创建了大量的应用程序，包括VScode和Atom。在创建Electron跨平台应用程序之前，您需要安装一些常用工具，例如Node、Vue和Electron。安装Node进入Node官网http://nodejs.cn/download/的下载页面，然后下载对应的版本。下载时建议下载稳定版。如果使用Homebrew安装Node，建议安装时将npm仓库镜像改为淘宝镜像，如下图。npmconfigsetregistryhttp://registry.npm.taobao.org/或npminstall-gcnpm--registry=https://registry.npm.taobao.org要安装/升级vue-cli，首先执行以下命令确认本地安装的vue-cli版本。如果没有安装vue-V或者不是最新版本，可以执行以下命令进行安装/升级。npminstall@vue/cli-gInstallElectron使用以下命令安装Electron插件。npminstall-gelectron或者cnpminstall-gelectron为了验证是否安装成功，可以使用如下命令。electron--version创建并运行项目Electron官方提供了一个简单的项目，你可以执行以下命令将项目克隆到本地。gitclonehttps://github.com/electron/e...然后在项目中执行如下命令启动项目。cdelectron-quick-startnpminstallnpmstart项目启动后的效果如下图所示。另外，我们可以使用vue-cli脚手架工具来创建项目。vueinitsimulatedgreg/electron-vue然后按照下面的提示一步步选择选项创建一个项目，如下图。然后，使用npminstall命令安装项目所需的依赖包。安装完成后，可以使用npmrundev或npmrunbuild命令运行electron-vue模板应用。运行效果如下图所示。Electron源代码目录Electron的源代码主要按照Chromium的拆分约定拆分成很多部分。为了更好地理解源代码，您可能需要看一下Chromium的多进程架构。Electron源代码目录的结构和含义如下：Electron├──atom-Electronsourcecode|├──app-系统入口密码|├──browser-包含主窗口、UI和所有其他与主进程相关的东西，它会告诉渲染进程如何管理页面||├──lib-主进程初始化代码的JavaScript部分||├──ui-UI部分在不同平台的实现|||├──cocoa-Cocoa部分代码来源|||├──gtk-GTK+部分的源代码|||└──win-WindowsGUI部分源码||├──default_app-Electron在未指定应用程序的情况下启动时显示的默认页面||├──api-主流程API的实现|||└──lib-API实现的Javascript部分代码||├──net-网络相关代码||├──mac-MacC代码相关的Objective||└──资源-图标、平台相关文件等|├──renderer-渲染进程中运行的代码||├──lib-JavaScript部分渲染过程初始化代码||└──api-渲染过程API的实现||└──lib-API实现的Javascript部分代码|└──common-主进程和渲染进程都使用的代码，包括节点的一些事件循环||集成到Chromium的事件循环中使用的工具函数和代码|├──lib-主进程和渲染进程都使用的Javascript初始化代码|└──api-主进程和渲染进程都使用API的实现和Electron内置模块的基础设施|└──库-API实现的Javascript部分的代码├──chromium_src-从Chromium项目复制过来的代码├──docs-英文版文档├──docs-translations-各种语言版本的文档翻译├──spec-自动化测试├──atom.gyp-Electron的构建规则└──common.gypi-`node`和`breakpad`等其他组件的编译设置和构建规则平时开发中，重点放在src,package.除了json和appveyor.yml目录外，其他需要注意的目录如下：script-用于构建、打包、测试等开发目的的脚本tools-gyp文件中使用的工具脚本，但与脚本不同directory，该目录下的脚本不应该被用户直接调用vendor-第三方依赖的源代码，为了防止人们将其与Chromium源代码中的同名目录混淆，这里我们这样做notusethird_party作为目录名node_modules-在构建中使用的第三方节点模块out-ninja的临时输出目录dist-脚本创建的临时发布目录script/create-dist.py-下载的预编译不支持gyp的第三方框架应用项目目录electron-vue模板创建的Electron项目结构如下图所示。与前端项目的项目结构类似，Electron项目的目录结构如下：electron-vue：Electron模板配置。build：文件夹，用于存放项目构建脚本。config：里面存放了项目的一些基本配置信息，最常用的是端口转发。node_modules：该目录存放了项目的所有依赖，即npminstall命令下载的文件。src：这个目录存放的是项目的源代码，也就是开发者写的代码放在这里。static：用于存放静态资源。index.html：是项目的首页和入口页面，也是整个项目唯一的HTML页面。package.json：定义了项目的所有依赖，包括开发时依赖和发布时依赖。对于开发者来说，90%的工作都在src中完成，src中的文件目录如下。Electron应用程序分为三个基本模块：主进程、进程间通信和渲染器进程。1、主进程Electron运行package.json的主脚本（background.js）的进程称为主进程。在主进程中运行的脚本通过创建网页来呈现用户界面。一个Electron应用程序总是只有一个主进程。2.渲染进程由于Electron使用Chromium来显示网页，所以也使用了Chromium的多进程架构。Electron中的每个网页都在自己的渲染器进程中运行。在普通浏览器中，网页通常在沙盒环境中运行，不允许接触原生资源。但是，Electron允许用户在Node.jsAPI的支持下，在页面中与操作系统进行一些低级的交互。3、主进程与渲染进程通信。主进程使用BrowserWindow实例来创建页面。每个BrowserWindow实例都在自己的渲染器进程中运行页面。当一个BrowserWindow实例被销毁时，相应的渲染进程也将被终止。主进程管理着所有网页及其对应的渲染进程。每个渲染器进程都是独立的，只关心它运行的网页。src目录结构在Electron目录下，src会包含两个目录，main和renderer。主目录主目录将包含两个文件，index.js和index.dev.js。index.js：应用程序的主要文件。Electron也是从这里开始的。它还用作webpack产品构建的入口文件。所有的主要流程工作都应该从这里开始。index.dev.js：这个文件专门用于开发阶段，因为它安装了electron-debug和vue-devtools。一般不需要修改这个文件，但是可以根据开发需要扩展。渲染进程renderer是渲染进程目录，通常是项目开发源码的存放目录，包括assets、components、router、store、App.vue和main.js。assets：assets下的(js,css)等文件会合并到dist文件夹下项目目录下的一个文件中。components：该文件用于存放应用开发的组件，可以是自定义组件。router：如果你了解vue-router，Electron项目的路由的用法和vue-router类似。modules:electron-vue使用vuex的module结构创建多个datastore，保存在src/renderer/store/modules中。相关案例https://github.com/xiaozhu188...https://github.com/SmallRural...之前的Vue.js纪录片教你写出令人窒息的烂代码[](http://mp.weixin.qq.com/s?__b...
