傻瓜式教程：使用Vue和Electron構建Markdown預覽器

杭州程式設計師張張發表於2020-09-15
Vue

開發人員必須適應的最新趨勢是為多個作業系統編寫一個程式碼庫。

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

微信搜尋【前端全棧開發者】關注這個脫髮、擺攤、賣貨、持續學習的程式設計師的，第一時間閱讀最新文章，會優先兩天發表新文章。關注即可大禮包，準能為你節省不少錢！
image

相關文章