Vue的桌面应用开发实践 赵 帅 前端工程师 @美团点评-到店事业群 负责-度假业务系统⼯工程化 瓦匠桌⾯面应⽤用开发者 瓦匠应用的介绍 02 桌面应用的技术选型 桌面应用开发总结 01 04 Electron Vue项目实践 03 应⽤用介绍 瓦匠 瓦匠⼯工作台 ⼀一体化解决⽅方案 提⾼高开发效率 应⽤用介绍 背景概述 需求类型 CRUD⻚页⾯面 场景化⻚页⾯面 登录SDK，数据上报，权限系统，发 登录SDK，数据上报，权限系统，发 布系统等…… 新项⽬目 效率低，同质化，重复成本 核⼼心功能 应⽤用介绍 多⼯工程模板 ⼀一键集成SDK 快速⽣生成⻚页⾯面 接⼊入发布系统 DevOps H5、PC 查询、表单、图表 登录，监控、埋点 瓦匠 ⼯工程搭建 模板注⼊入 构建部署 项⽬目配置 技术挑战 应⽤用介绍 ⽂文件的IO 可视化编辑 模板的编译 命令的调⽤用 ⼯工程搭建 模板注⼊入 模板注⼊入 构建部署 项⽬目配置 Web开发能⼒力力不不⾜足 命令⾏行行⽆无法可视化 （GUI界⾯面) 桌⾯面应⽤用 …… 瓦匠应用的介绍 02 桌面应用的技术选型 桌面应用开发总结 01 04 03 Electron Vue项目实践 优点：开发速度快，跨平台，更更新迭代快 缺点：集成Chromium，安装包⼤大 优点：接近Native性能，功能丰富，跨平台 缺点：库太⼤大，编译慢，开发周期⻓长

Windows 和 Linux 系统下的应⽤ 架构 后端：挣钱养家 的 Node.js 负责：实现业务逻辑 注： Node.js 是 Javascript 的⼀个 Web Server 前端：貌美如花 的 Chromium 负责：显示内容 注：可以看成 Chromium 是 Chrome 的浏览器的内核实现 可把Electron看成 ⼀个被 JavaScript 控制的，精简版的 4.0)协议发布 all right reserved，powered by Gitbook最后更 新： 2020-08-09 10:12:44 应⽤举例 18 Electron安装 初始化环境 ⽤Electron之前，需要确保本地环境已安装好 npm 和 node 确保已安装了 Node.js ： node -v node -v 如果没有安装，则先去安装： brew └── renderer.js python⽀持 27 4 directories, 21 files 4 directories, 21 files ⽤VSCode打开，效果是： 初始化node环境 node要安装版本v8 之前： brew install node 安装出的node是 13.5.0 ，会导致后续编译electron有问题，所以需要换 8.x 版本的

- 21 - 本文档使用 书栈(BookStack.CN) 构建 引自ChromeDriver - WebDriver for Chrome: WebDriver 是一款开源的支持多浏览器的自动化测试工具。它提供了操作网页、用户输入、JavaScript 执行等能力。ChromeDriver 是一个实现了 WebDriver 与 Chromium 联接协议的独立服务。它也是由开发了 Chromium 25. // 与此同时，你应该删除相应的元素。 26. mainWindow = null; 27. }); 28. } 29. 30. // Electron 会在初始化后并准备 31. // 创建浏览器窗口时，调用这个函数。 32. // 部分 API 在 ready 事件触发后才能使用。 33. app.on('ready', createWindow); —enable-logging 开启时有效. 支持的 Chrome 命令行开关 - 53 - 本文档使用 书栈(BookStack.CN) 构建 一些 Electron 的行为受到环境变量的控制，因为他们的初始化比命令行和应用代码更早. POSIX shells 的例子: 1. $ export ELECTRON_ENABLE_LOGGING=true 2. $ electron Windows 控制台:

Electron 应⽤在执⾏⼀些⻓时间任务（⽐如上传、下载），我们想关闭界⾯后任务依旧执⾏。再次打开界⾯，依旧可以看到正在执⾏的任务以及任 务进度。托盘可以帮我们实现这个功能。 创建托盘和菜单示例 实例化 Tray 并传⼊图标路径； 创建菜单并配置到托盘中。 const { app, Menu, Tray } = require('electron') let tray = null;