用Vue和Electron构建Markdown预览器

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

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

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

在本教程中,我们将逐步介绍如何使用Vue和Electron构建Markdown预览应用。

前提

要继续学习本教程,你需要具备以下条件:

  • 熟悉HTML,CSS和Javascript(ES6 )
  • VS Code或开发计算机上安装的任何代码编辑器
  • Vue的基础知识

我们将建立什么

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

完成的结果将如下所示:

教程|用Vue和Electron构建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 /

教程|用Vue和Electron构建Markdown预览器

选择 Manually select features 功能,然后按Enter,这将使你能够明确选择要包含在新项目中的库。

/ 步骤2 /

教程|用Vue和Electron构建Markdown预览器

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

/ 步骤3 /

教程|用Vue和Electron构建Markdown预览器

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

/ 步骤4 /

教程|用Vue和Electron构建Markdown预览器

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

/ 步骤5 /

教程|用Vue和Electron构建Markdown预览器

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

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

/ 步骤6 /

教程|用Vue和Electron构建Markdown预览器

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

/ 步骤7 /

教程|用Vue和Electron构建Markdown预览器

输入 Y 或 N,取决于你是否要将其保存为预设,这样可以节省你在创建新的Vue应用程序时完成所有这些步骤的时间。

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

创建应用程序后,你应该在终端上看到以下内容:

教程|用Vue和Electron构建Markdown预览器

要运行该应用程序,请移至项目目录,然后运行 npm run serve。

cd markdown-previewer
code . && npm run serve

code . 命令将在VS Code中打开该项目,但是欢迎你使用你选择的任何代码编辑器。

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

教程|用Vue和Electron构建Markdown预览器

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

教程|用Vue和Electron构建Markdown预览器

现在我们已经启动并运行了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应用程序。

教程|用Vue和Electron构建Markdown预览器

安装Bootstrap

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

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

vue add bootstrap-vue bootstrap

系统会询问你是否要使用 babel。输入 y,然后按Enter键继续。

教程|用Vue和Electron构建Markdown预览器

现在,我们可以设置用户界面(UI)。

设置用户界面

在设置用户界面之前,让我们整理一下。

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

<template>
  <section>
    <div class="container-fluid">
      <div class="row text-light">
        <div class="col-md-6">
          <h3>Editorh3>
        div>
        <div class="col-md-6">
            <h3>Previewerh3>
        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"
>

输出应如下所示:

教程|用Vue和Electron构建Markdown预览器

我们的用户界面需要更多的清理,让我们删除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>

更改的结果应如下所示:

教程|用Vue和Electron构建Markdown预览器

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

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

class=“col-md-6”>
<h3>Previewerh3>
<div class=“card text-left p-2” :style=“styleObject”>{{content}}div>
div>

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

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

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

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

教程|用Vue和Electron构建Markdown预览器

实现markdown预览器

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

class=“card text-left p-2” :style=“styleObject” v-html=“content”>div>

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

教程|用Vue和Electron构建Markdown预览器

我们将演示如何通过两种方式实现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” class=“card text-left p-2” :style=“styleObject”>{{content}}

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

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

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

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

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

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

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

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

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

$1

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

$1

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

$1

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

$1

\']
]

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

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

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

教程|用Vue和Electron构建Markdown预览器

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

  • List:[/^(?:-)\s*(. ?)[ \t]*$/gm, \’
    • $1

    ’]

  • 块引号:[/^(?:>)\s*(. ?)[ \t]*$/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” class=“card text-left p-2” :style=“styleObject”>{{content}}

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

最后

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

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

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

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/procedure/11461.html

发表评论

登录后才能评论