关于前端:傻瓜式教程使用Vue和Electron构建Markdown预览器

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

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

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

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

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

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

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

实现的后果将如下所示：

应用 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 应用程序，但首先，零碎会提醒你一些问题来设置应用程序。

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

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

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

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

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

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

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

输出 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 包了。

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，这将帮忙你更快地设置用户界面。

应用 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，这样高度就会始终和代码编辑器的高度一致。

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

你能够应用 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

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

关于前端:傻瓜式教程使用Vue和Electron构建Markdown预览器

前提

咱们将建设什么

设置 Vue

步骤 1

步骤 2

步骤 3

步骤 4

步骤 5

步骤 6

步骤 7

增加 electron-builder

装置 Bootstrap

设置用户界面

实现 markdown 预览器

简单的形式

简略办法

最初