开发人员必须适应的最新趋势是为多个操作系统编写一个代码库。

Electron是一个JavaScript框架，它能够让你用简略的JavaScript和HTML创立桌面应用程序，并将网站转换成可执行的应用程序，能够充分利用Windows、Mac或Linux操作系统的所有性能。

Vue是一个为构建交互式和渐进式网络应用而设计的库，它提供了具备简略灵便的API的数据响应式组件。

在本教程中，咱们将逐渐介绍如何应用Vue和Electron构建Markdown预览利用。

前提

要持续学习本教程，你须要具备以下条件：

  • 相熟HTML，CSS和Javascript（ES6 +）
  • VS Code或开发计算机上安装的任何代码编辑器
  • Vue的基础知识

咱们将建设什么

咱们将构建一个预览markdown代码的桌面应用程序。基本上，咱们将有一个蕴含两列的网格：一列用于文本编辑器，另一列用于预览。

实现的后果将如下所示：

设置Vue

应用Vue CLI创立一个新的Vuejs应用程序。如果你的开发计算机上未装置Vue CLI，则能够应用以下命令进行装置：

npm install -g @vue/cli

-g 标记会将其全局装置在你的计算机上。

接下来，应用CLI创立一个新的Vue应用程序，应用 vue create 命令，后跟项目名称。

咱们的应用程序的名称是 markdown-previewer，因而咱们能够通过运行以下命令来创立它：

vue create markdown-previewer

运行 vue create markdown-previewer 将创立一个新的Vue应用程序，但首先，零碎会提醒你一些问题来设置应用程序。

步骤1

抉择 Manually select features 性能，而后按Enter，这将使你可能明确抉择要蕴含在新我的项目中的库。

步骤2

要抉择和管制性能列表上的一个我的项目，鼠标在这里无奈工作，所以当你想抉择/勾销一个性能时，请应用箭头高低挪动，而后按空格键。抉择 Router，Babel 和 Linter。

步骤3

咱们不会应用history模式，相同，咱们将应用hash模式。

步骤4

抉择 ESLint + standard config。这基本上是咱们的linter的配置， ESLint帮忙你在编写代码时保护模式。

步骤5

在保留时单击Lint。保留代码时，它将在代码上运行lint。

点击 Lint on save，保留代码时，它将在代码上运行lint。

步骤6

抉择 package.json，咱们将在这里存储所有我的项目依赖项。

步骤7

输出 Y 或 N，取决于你是否要将其保留为预设，这样能够节俭你在创立新的Vue应用程序时实现所有这些步骤的工夫。

单击Enter开始构建新的Vue应用程序。

创立应用程序后，你应该在终端上看到以下内容：

要运行该应用程序，请移至我的项目目录，而后运行 npm run serve。

cd markdown-previewercode . && npm run serve

code . 命令将在VS Code中关上该我的项目，然而欢送你应用你抉择的任何代码编辑器。

编译后，该应用程序将在该应用程序在端口http://localhost:8080/上运行的终端上输入。

如果在浏览器上拜访 http://localhost:8080/，则应看到以下内容。

当初咱们曾经启动并运行了Vue应用程序，该增加 electron-builder 包了。

增加 electron-builder

electronic-builder 软件包可帮忙你打包和构建实用于macOS，Windows和Linux的可散发的Electron应用程序，并具备开箱即用的自动更新反对。

要将此软件包增加到你的应用程序，请应用 Vue add 命令，Vue CLI的这项很酷的性能会主动在应用程序中配置软件包。

要装置该软件包，请运行以下命令

vue add electron-builder

接下来，零碎会提醒你抉择首选版本。抉择最新版本（在撰写本文时为9.0.0），而后按Enter键持续。

运行此命令后，将在src目录中创立一个 background.js 文件。这就是Electron的作用，主过程为应用程序创立桌面窗口。

装置electronic-builder 包后，你将在 package.json 文件中找到一些新脚本：

"electron:build": "vue-cli-service electron:build","electron:serve": "vue-cli-service electron:serve","postinstall": "electron-builder install-app-deps","postuninstall": "electron-builder install-app-deps"

应用 electron:serve 命令运行该应用程序。

npm run electron:serve

这将在你的桌面上关上Electron应用程序。

装置Bootstrap

下一步是装置Bootstrap，这将帮忙你更快地设置用户界面。

应用 vue add 命令装置Bootstrap。请记住，vue add 命令将在 main.js 文件中处理程序包注册。要装置它，请运行以下命令：

vue add bootstrap-vue bootstrap

零碎会询问你是否要应用 babel。输出 y，而后按Enter键持续。

当初，咱们能够设置用户界面（UI）。

设置用户界面

在设置用户界面之前，让咱们整顿一下。

首先，用以下代码替换 compoments/HelloWorld 中的代码。

<template>  <section>    <div class="container-fluid">      <div class="row text-light">        <div class="col-md-6">          <h3>Editor</h3>        </div>        <div class="col-md-6">            <h3>Previewer</h3>        </div>      </div>    </div>  </section></template><script>export default {  name: "HelloWorld"};</script>

这是Bootstrap中的根本网格零碎，因为 eslint-loader，你应该遇到谬误。要停用它，请创立一个 vue.config.js 文件并增加以下内容。

module.exports = {  lintOnSave: false}

为了使这些更改失效，你须要重新启动服务器。

当初，让咱们设置代码编辑器。为此，咱们将应用 Ace 软件包。

要装置此软件包，请关上你的终端并输出以下内容。

npm install --save-dev vue2-ace-editor

接下来，在 HelloWorld.vue 组件中定义 ace 包。

components: {    editor: require("vue2-ace-editor")}

你还必须为编辑器定义一些状态。例如，你须要定义内容状态，即所有markdown代码的存储地位。另外，你应该应用 state 属性定义编辑器的高度。

data() {  return {    content: "",    height: window.innerHeight - 100  };},

当初创立一个办法来引入编辑器的所有实例，如语言类型、主题和模式。

methods: {  editorInit() {    editorInit() {      require("brace/ext/language_tools");      require("brace/mode/markdown");      require("brace/theme/dracula");    }  }}

当初，你能够在模板局部中注册组件。

<editor   v-model="content"   ref="”aceeditor”"   @init="editorInit"   lang="”markdown”"   theme="dracula"   :height="height"></editor>

输入应如下所示：

咱们的用户界面须要更多的清理，让咱们删除Vue徽标并为预览增加一个局部。

要删除Vue徽标，请转至 views/Home.vue 文件，并将代码替换为以下内容。

<template>  <div>    <HelloWorld />  </div></template><script>// @ is an alias to /srcimport HelloWorld from "@/components/HelloWorld.vue";export default {  name: "Home",  components: {    HelloWorld  }};</script>

咱们还须要删除应用程序顶部的导航链接，并更改背景色。关上根 App.vue 组件，而后将代码替换为以下内容。

<template>  <div id="app">    <router-view />  </div></template><style>body {  background: #000000;}#app {  font-family: helvetica;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  height: 100%;}</style>

更改的后果应如下所示：

当初咱们能够增加咱们的预览局部。咱们将应用一个卡片来预览标记。

在你的 components/HelloWorld.vue 文件中的模板中增加一个简略的卡片。

<div class="col-md-6">  <h3>Previewer</h3>  <div class="card text-left p-2" :style="styleObject">{{content}}</div></div>

而后，定义一个状态以保留数据的某些款式。

styleObject: {  height: window.innerHeight - 100 + "px",  color: "black",  overflowY: "auto"},

在这里，咱们要给div增加一些动静款式，类为 card，这样高度就会始终和代码编辑器的高度一致。

你在代码编辑器中键入的任何内容都会显示在预览卡上。

实现markdown预览器

你能够应用 v-html 指令将代码库转换为HTML预览器。

<div class="card text-left p-2" :style="styleObject" v-html="content"></div>

这会将编辑器中的代码转换为HTML。

咱们将演示如何通过两种形式实现markdown预览器：简略形式和简单形式。

简单的办法须要编写本人的自定义markdown指令。简略的办法是简略地从你的markdown代码中装置一个包。

让咱们从简单的办法开始。

简单的形式

咱们将应用正则表达式为标记设置本人的自定义Vue指令，这是一个繁琐的过程。

首先在 src 内创立一个 directive 目录，而后创立一个 encode.js 文件。你将在此处编写所有markdown配置。

接下来，将markdown注册到 main.js 文件中。

import decode from '@/directives/decode'Vue.directive("decode", decode)

设置你的markdown的代码。在 bind() 办法中封装了一个自定义的Vue指令，并将一个元素作为param传递。

export default {  bind: el => {    console.log(el.innerHTML)  }}

当初，你能够在模板上应用 v-decode 指令。

<div v-markdown :key="content" class="card text-left p-2" :style="styleObject">{{content}}</div>

将内容作为key传递，每当编辑器上呈现 keyup 事件时，指令就会将内容记录到管制台上。

下一步是开始为markdown编写一些正则表达式。

创立一个自定义 rules 数组以保留所有正则表达式。从一个简略的头开始：

const rules = [  [/^(?:######)\s*(.+?)[ \t]*$/gm, '<h6>$1</h6>'],]

这个简略的规定会将 ###### 转换为HTML元素。

让咱们来合成一下这里产生的事件：

  • ^ 申明行首的地位
  • （?:######） 与字符 ###### 匹配
  • \s* 匹配空格字符
  • (.+?) 匹配除行终止符之外的所有字符。一个例子是行终止符，它在输出字符序列中标记行的结尾
  • [\t]* 是一个限定词，在0到无限度之间匹配，并且匹配空格或制表符
  • g 返回所有匹配项
  • m 使 ^ 和 $ 匹配每行的开始/完结

当初咱们曾经有了元素的regex，咱们能够通过批改表达式为其余头元素做同样的事件。

const rules = [  [/^(?:######)\s*(.+?)[ \t]*$/gm, '<h6>$1</h6>'],  [/^(?:#####)\s*(.+?)[ \t]*$/gm, '<h5>$1</h5>'],  [/^(?:####)\s*(.+?)[ \t]*$/gm, '<h4>$1</h4>'],  [/^(?:###)\s*(.+?)[ \t]*$/gm, '<h3>$1</h3>'],  [/^(?:##)\s*(.+?)[ \t]*$/gm, '<h2>$1</h2>'],  [/^(?:#)\s*(.+?)[ \t]*$/gm, '<h1>$1</h1>']]

在这里，咱们为所有头元素定义了一个正则表达式。为了应用它们，咱们必须循环，并用与表达式相匹配的规定替换咱们的自定义输出。

bind(el) {    let content = el.textContent    rules.forEach(([rule, template]) => {      content = content.replace(rule, template);      console.log(content)    })    el.innerHTML = content  }}

有了这个定义，咱们能够在编辑器中应用header元素。

让咱们定义一些其余简略的规定。

  • List：[/^(?:-)\s*(.+?)[ \t]*$/gm, '<ul><li>$1</li></ul>’]
  • 块引号：[/^(?:>)\s*(.+?)[ \t]*$/gm, ' <blockquote>$1</blockquote>']

为咱们的markdown编写所有的表达式可能会让人感到困惑和消耗工夫。然而了解所有包背地产生的事件总是好的。这将咱们引向实现markdown previewer的简略办法。

简略办法

比较简单的办法是装置一个软件包，以帮忙你解决数据。

咱们将应用 vue-directive-markdown。要装置它，请关上你的终端，运行以下命令。

npm install vue-directive-markdown --save-dev

接下来，在 main.js 文件中注册并配置它，以便能够在应用程序中全局拜访它。

import VueDirectiveMarkdown from 'vue-directive-markdown'Vue.directive('decode', VueDirectiveMarkdown)

你能够通过剖析模板中的 v-decode 来拜访它。

<div v-decode :key="content" class="card text-left p-2" :style="styleObject">{{content}}</div>

最初，将内容作为key传递，以便你每次输出时都会更新。

最初

理解如何编写自定义指令将真正进步你的Vue技能。须要为桌面和Web编写一个代码库，这是咱们都必须适应的。

返回GitHub获取残缺的源代码。

原文：https://blog.logrocket.com
作者：Wisdom Ekpot

首发于公众号《前端全栈开发者》，第一工夫浏览最新文章，会优先两天发表新文章。关注后私信回复：大礼包，送某网精品视频课程网盘材料，准能为你节俭不少钱！