H5W3
当前位置:H5W3 > 其他技术问题 > 正文

傻瓜式教程:使用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

要选择和控制功能列表上的一个项目,鼠标在这里无法工作,所以当你想选择/取消一个功能时,请使用箭头上下移动,然后按空格键。选择 RouterBabelLinter

步骤3

我们不会使用history模式,相反,我们将使用hash模式。

步骤4

选择 ESLint + standard config。这基本上是我们的linter的配置, ESLint帮助你在编写代码时维护模式。

步骤5

在保存时单击Lint。保存代码时,它将在代码上运行lint。

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

步骤6

选择 package.json,我们将在这里存储所有项目依赖项。

步骤7

输入 YN,取决于你是否要将其保存为预设,这样可以节省你在创建新的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

首发于公众号《前端全栈开发者》,第一时间阅读最新文章,会优先两天发表新文章。关注后私信回复:大礼包,送某网精品视频课程网盘资料,准能为你节省不少钱!
image

未经允许不得转载:H5W3 » 傻瓜式教程:使用Vue和Electron构建Markdown预览器

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址