傻瓜式教程：使用Vue和Electron构建Markdown预览器

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

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-previewer
code . && 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 /src
import 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

微信搜索【前端全栈开发者】关注这个脱发、摆摊、卖货、持续学习的程序员的，第一时间阅读最新文章，会优先两天发表新文章。关注即可大礼包，准能为你节省不少钱！