【译】Creating a Markdown editor/previewer in Electron and Vue.js
使用Electron编写桌面应用程序是迄今为止我在职业生涯中使用过的最简单，最令人愉快的GUI应用程序工具包。 Electron是Atom，Visual Studio Code，Slack桌面客户端，Postman，GitKraken和Etcher等流行应用程序中使用的工具包。 每个都是功能强大，高性能，跨平台的应用程序，具有丰富的用户体验，为用户提供卓越的功能，每个平台上具有相同的用户界面界面，同时正确集成到平台中。
跨平台GUI工具包经常被嘲笑为速度慢，不能提供与平台的良好集成，或者在GUI功能方面有所妥协。 Electron通过基于谷歌Chrome浏览器的巧妙架构实现这一壮举。 也就是说，Electron包装Chromium的核心，以便您编写Node.js应用程序来管理包含应用程序窗口的一个或多个BrowserWindow对象。 顾名思义， BrowserWindow提供了基于最新版Chrome的完整HTML5，CSS3，JavaScript ES-2016编程环境。
换句话说 - 使用Electron，您可以使用最先进的Web技术来开发桌面GUI应用程序。
一个有趣的因素是，因为Electron基于Chromium，Chrome开发人员工具是内置的。这意味着Electron应用程序开发人员可以轻松获得优秀的Web应用程序调试和检查工具，这些工具已经过前端工程师的全面测试。世界。
Electron的架构有两套流程。 Main进程是前面提到的Node.js应用程序，用于管理应用程序的其余部分。 Renderer进程是前面提到的BrowserWindow实例。 每个都是一个顶级窗口，其中包含通过HTML + CSS + JavaScript代码指定的UI。 这些进程通过进程间通信通道相互通信。
虽然Electron使用Chromium，但安全模型与常规浏览器JavaScript有很大不同。 在Electron BrowserWindow中执行的代码可以访问Node.js模块，并可以访问文件系统。 有一些安全警告： https ： //electronjs.org/docs/tutorial/security阅读安全警告非常重要。
要探索Electron，我们将使用您选择的HTML模板构建一个Markdown编辑器，其中包含生成的HTML的实时预览。 UI将使用Vue.js，Bulma / Buefy和ACE编辑器组件的组合构建。
结果可能是这样的应用程序：
目标
左侧是带有Markdown测试文件的ACE编辑器组件，右侧是呈现给HTML的Markdown的预览。 这是该应用程序的核心。 当然，完成的应用程序将需要工具栏，菜单选项和其他一些东西。 我们将完成一个应用程序，以提供一个有用的示例。
GitHub上提供了本文附带的源代码，以帮助阅读： https ：//github.com/sourcerer-io/electron-vue-buefy-editor
因为Electron基于Node.js和JavaScript，所以您需要熟悉它们。 可以使用Node.js创建一整套东西。 它是一个代码开发平台，用于在浏览器外部运行JavaScript，主要是在服务器环境中。 像Node.js Web Development这样的书可以让你开始使用Node.js. Electron将Node.js带入桌面应用程序开发领域。
构建编辑器脚手架
随着所有这些部件的组装，存在许多可能使应用程序开发变得困难的复杂性。 感谢各自的团队提供有用的应用程序入门代码，这项任务远没有那么困难。
Electron框架已经将一些复杂性捆绑到一个易于使用的包中。 例如，Electron文档（ https://electronjs.org/docs/tutorial/first-app ）包含用于启动简单演示应用程序的配方。 遵循这些说明并研究最终的应用程序非常有用。 但是，我们需要其他东西作为起点。
由于目标是使用Vue.js构建此应用程序，因此我们需要一个适用于该工具包的起点。 Vue.js应用程序通常是为网站构建的，所以我们需要一些不同的东西。
在这种情况下，我们想在Electron中运行Vue.js代码。 由于Electron UI是使用Web技术创建的，因此它当然可以支持Vue.js. Electron-Vue框架提供了我们所需的一切，一个支持在电子应用程序中使用Vue.js的构建和打包系统。https://simulatedgreg.gitbooks.io/electron-vue/
首先，安装Vue命令行工具：
$ sudo npm install -g vue-cli vue-cli提供的主要功能是下载应用程序模板并设置启动器应用程序。 虽然它有一些内置模板，但它可用于下载第三方模板，包括Electron-Vue。
$ vue init simulatedgreg / electron-vue electron-vue-buefy-editor ？ 应用程序名称electron-vue-buefy-editor
？ 项目描述电子项目
？ 选择要安装vue-electron的Vue插件
？ 使用lint和ESLint？ 没有
？ 使用Karma + Mocha设置单元测试？ 没有
？ 使用Spectron + Mocha设置端到端测试？ 没有
？ 你想用什么构建工具？ 建设者
？ 作者David Herron < [email protected] > vue-cli·生成“electron-vue-buefy-editor”。 - - 可以了，好了。 欢迎来到您的新电子项目！ 请务必查看此样板文档
https://simulatedgreg.gitbooks.io/electron-vue/content/。 下一步： $ cd electron-vue-buefy-editor
$ yarn（或`npm install`）
$ yarn run dev（或`npm run dev`） 初始项目设置有许多替代方案。 在这个例子中，我们只安装了vue-electron，没有安装ESLint或单元测试支持，并使用电子构建器指定打包应用程序。 您可能更喜欢不同的设置，因此请根据需要回答问题。 您可以按照这些说明查看基本的Electron-Vue应用程序。
演示Electron-Vue应用程序
选择用于Vue.js的UI工具包组件
Vue.js是用于实现在Web浏览器中运行的组件的框架。 Vue.js应用程序是使用这些组件构建的，理论上可以使用Vue.js以及自定义开发的CSS和JavaScript完全构建UI。 但是，有一些开源项目提供预先烘焙的UI组件，内置响应式Web最佳实践。
由于Bootstrap非常受欢迎，因此首先想到的是使用Bootstrap。 虽然将Bootstrap集成到Vue.js应用程序很容易，但很快就会遇到问题。 Vue.js和jQuery非常不兼容，强烈建议不要在Vue.js中使用Bootstrap或jQuery。 问题是Vue.js期望严格控制DOM操作，因此无法使用jQuery等其他技术进行DOM操作。 有多个项目试图将Bootstrap代码集成为Vue.js组件，但没有一个项目支持Bootstrap 4。
一个广泛推荐的替代方案是Bulma工具包。 不能说这个名字有吸引力，但网站https://bulma.io/为Bulma提供了一个很好的案例，作为一个有价值的UI框架。 有超过100,000名开发人员使用Bulma，它是一个仅限CSS的工具包，使其轻量级，易于与Vue.js集成。 Buefy组件库将Bulma与Vue.js集成： https：//buefy.github.io/#/我们将在应用程序中使用Buefy。
Buefy可以使用https://materialdesignicons.com/上设置的Material Design图标。这些图标可作为Node.js模块在https://www.npmjs.com/package/vue-material-design-icons上使用
要做的最后一个UI选择是用于编辑Markdown的组件。 虽然我们可以让用户在常规TextArea组件中编写Markdown，但我们可以做得更好。 例如，Ace编辑器组件为各种编码语言（如JavaScript或C ++或HTML）提供了非常称职的编辑体验。 我们可能希望编辑器能够支持编辑HTML模板，CSS文件或许多其他资源，而Ace编辑器组件可以处理所有这些。 Ace在其网站上有记录： https ：//ace.c9.io/ Vue2 Ace Editor组件包用于在Vue.js中使用Ace： https： //github.com/chairuosen/vue2-ace-editor
将Buefy和ACE添加到Electron / Vue.js应用程序
我们已经初始化了一个空白的Vue.js应用程序，并选择了要使用的UI框架。让我们首先将这些组件与空白应用程序集成。
目录结构包括：
目录src/main包含Main进程的代码，而src/renderer包含Renderer进程的代码。 您将看到后者是Vue组件的存储位置。
首先是安装包依赖项：
$ npm install buefy vue2-ace-editor vue-material-design-icons --save 这将安装前面描述的Vue.js组件，以及它们的依赖项，例如Bulma框架和Ace编辑器组件。
编辑index.ejs ，这是Electron-Vue提供的布局模板，以匹配此代码：
< html style =“height：100％;”>
< 头 >
< meta charset =“utf-8”>
< meta name =“viewport”content =“width = device-width，initial-scale = 1”>
< title > electron-vue-buefy-editor title >
..
head >
< body style =“height：100％;”> .. body >
html > 需要修改和标记，以便应用程序填充窗口的整个高度。
接下来我们将Buefy带入应用程序，将src/renderer/main.js的前面部分更改为：
从'vue'导入Vue;
从'./App'导入应用程序;
从'./router'导入路由器;
从'buefy'导入Buefy;
import'buefy / lib / buefy.css';
从'util'导入util; 从'电子'导入{ipcRenderer}; Vue.use（Buefy）; 我们将继续对此文件进行更多更改。 这部分将Buefy组件添加到Vue.js.
以这种方式添加Buefy遵循电子应用的最佳实践。 根据Electron文档（ https://electronjs.org/docs/tutorial/security ）中的Security页面，非常重要的是，不要从第三方Web服务加载代码。 阅读安全页面了解更多详情。 真。这不是一个闲置的建议，去看吧。
ipcRenderer对象用于从Main进程到Renderer进程的通信。
此时您可以执行npm run dev - 在开发模式下运行应用程序 - 并且看到没有任何更改。 然而，我们为有趣的事情奠定了基础。
实现编辑器应用程序
接下来，删除src/renderer/components下的每个文件。 这些文件包含演示屏幕，我们在应用程序中不需要它。
将App.vue更改为：
<模板>
<编辑页>