markdown 提示文本_教程｜用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-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 中的代码。

Editor

Previewer

这是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");    }  }}

现在，你可以在模板部分中注册组件。

输出应如下所示：

我们的用户界面需要更多的清理，让我们删除Vue徽标并为预览添加一个部分。

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

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

更改的结果应如下所示：

现在我们可以添加我们的预览部分。我们将使用一个卡片来预览标记。

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

Previewer

{{content}}

然后，定义一个状态以保存数据的某些样式。

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

在这里，我们要给div添加一些动态样式，类为 card，这样高度就会一直和代码编辑器的高度一致。

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

实现markdown预览器

你可以使用 v-html 指令将代码库转换为HTML预览器。

这会将编辑器中的代码转换为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 指令。

{{content}}

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

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

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

const rules = [  [/^(?:######)s*(.+?)[ ]*$/gm, '

$1

'],]

这个简单的规则会将 ###### 转换为HTML元素。

让我们来分解一下这里发生的事情：

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

现在我们已经有了元素的regex，我们可以通过修改表达式为其他头元素做同样的事情。

const rules = [  [/^(?:######)s*(.+?)[ ]*$/gm, '

$1

'], [/^(?:#####)s*(.+?)[ ]*$/gm, '

$1

'], [/^(?:####)s*(.+?)[ ]*$/gm, '

$1

'], [/^(?:###)s*(.+?)[ ]*$/gm, '

$1

'], [/^(?:##)s*(.+?)[ ]*$/gm, '

$1

'], [/^(?:#)s*(.+?)[ ]*$/gm, '

$1

']]

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

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

有了这个定义，我们可以在编辑器中使用header元素。

让我们定义一些其他简单的规则。

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

  $1

  ']为我们的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 来访问它。

{{content}}

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

最后

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

前往GitHub获取完整的源代码。

GitHub：https://github.com/Wisdom132/Electron-Vue-Markdown-Previewer-

---

最近整理了一份优质视频教程资源，想要的可以关注我然后私信“666”即可免费领取哦！如果文章对你有所启发和帮助，可以点个关注、收藏、转发，也可以留言讨论，这是对作者的最大鼓励。