虽然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-g安装Electron使用以下命令安装Electron插件。npminstall-gelectron或者cnpminstall-gelectron为了验证是否安装成功，可以使用如下命令。electron--versioncreateandrunprojectElectron官方改进了一个简单的项目，你可以执行以下命令将项目克隆到本地。gitclonehttps://github.com/electron/electron-quick-start在项目中执行以下命令启动项目。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内置模块的基础设施|└──lib-API实现的Javascript部分的代码├──chromium_src-来自从Chromium项目复制的代码├──docs-英文版文档├──docs-translations-各种语言版本的文档翻译├──spec-自动化测试├──atom.gyp-Electron的构建规则└──common.gypi-为其他组件（例如`node`和`breakpad`）编译设置和构建规则。平时开发时，需要重点关注src、package.json和appveyor.yml目录。另外，其他需要注意目录如下：script-用于构建、打包、测试等开发目的的脚本tools-gyp文件中使用的工具脚本，但与script目录不同的是，该目录下的脚本应该不被用户直接调用vendor-第三方依赖的源码，防止与Chromium源码中的同名目录混淆，这里我们不使用third_party作为目录名node_modules-第三方buildout中使用的nodemodules-temporaryforninja输出目录dist-脚本script/create-dist.py创建的临时发布目录external_binaries-下载预编译第三方框架应用项目目录，不支持通过gyp构建Electron项目使用electron-vue模板创建的结构如下图所示。与前端项目的项目结构类似，Electron项目的目录结构如下：electron-vue：Electron模板配置。build：文件夹，用于存放项目构建脚本。config：里面存放了项目的一些基本配置信息，最常用的是端口转发。node_modules：该目录存放了项目的所有依赖，即npminstall命令下载的文件。src：这个目录存放的是项目的源代码，也就是开发者写的代码放在这里。static：用于存放静态资源。index.html：是项目的首页和入口页面，也是整个项目唯一的HTML页面。package.json：定义了项目的所有依赖，包括开发时依赖和发布时依赖。对于开发者来说，90%的工作都在src中完成，src中的文件目录如下。Electron应用程序分为三个基本模块：主进程、进程间通信和渲染进程。【主进程】Electron运行package.json的主脚本（background.js）的进程称为主进程。在主进程中运行的脚本通过创建网页来呈现用户界面。一个Electron应用程序总是只有一个主进程。【渲染进程】由于Electron使用Chromium来显示网页，所以也使用了Chromium的多进程架构。Electron中的每个网页都在自己的渲染器进程中运行。在普通浏览器中，网页通常运行在沙箱环境中，不允许接触原生资源。但是，Electron允许用户在Node.jsAPI的支持下，在页面中与操作系统进行一些低级的交互。【主进程与渲染进程的通信】主进程使用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中。综合实例1、网易云音乐electron-vue-cloud-music是一款采用Electron+Vue+AntDesignVue技术开发的跨平台桌面应用。下载链接：https://github.com/xiaozhu188/electron-vue-cloud-music。具有以下特点：拖放播放桌面歌词迷你模式，自定义托盘右键菜单，任务栏缩略图，歌曲操作，音频可视化，自动/手动检查更新Nedb数据库持久化，自定义安装路径，美化安装界面，在浏览器中启动客户端TravisCL，AppVeyor自动构建换肤、下载、匹配本地歌曲、网络换桌面通知、分享歌曲/歌单/MV/视频等直到QQ空间登录、私密Fm、歌单、专辑、歌手,排行榜,MV,视频,评论,搜索,用户,新闻,粉丝,关注,云盘,收藏...心跳模式,歌词微调,下一曲播放,追加播放,单曲循环,随机播放,列表循环路由引导、局部刷新、首页栏目调整和持久化……下面是一些运行效果：2、qq音乐播放器qq音乐播放器是一款基于electron-vue开发的音乐播放器，界面仿QQ音乐，技术使用的技术栈是electron-vue+vue+vuex+vue-router+element-UI。您可以通过以下方式运行该项目。gitclonehttps://github.com/SmallRuralDog/electron-vue-music.gitcdelectron-vue-musicnpminstall#运行开发模式npmrundev#打包安装文件npmrunbuild部分运行效果如图在下图中。
