vue 匯入.md檔案（markdown轉HTML）

FannieGirl發表於2020-12-30
VueHTML

前言

　　剛接到這個需求的時候，覺得很簡單（的確很簡單）但是這玩意的坑真的也讓人無奈。

　　網上找了很多的資料，都沒有寫出痛點（這就很難過了）。通過實踐並且在我們專案中平穩執行，想分享給後面的人

　　我的部落格上也寫了100多篇文章，點選量有上萬的也有個位數的，能夠幫助到他人這就是寫作記錄的動力。

需求

　　vue專案中可以良好展示markdown（只是展示功能 沒有編輯功能）

痛點問題

  1. .md檔案型別，直接模組載入（只有字串，這得多難受，怎麼維護呢），還是一個檔案一個檔案的好維護並且好修改複用
  2. 用第三方外掛，只是md轉HTML，不帶樣式的（重點強調 沒有樣式沒有樣式）

解決方案

一、vue需要有markdown這樣良好的展示效果，什麼樣的外掛是最好的？

　　貨比三家，我推薦以下方式

//安裝
npm install --save  html-loader;
npm install -- save markdown-loader;

//webpack

 {
   test: /\.md$/,
   loader: "html-loader",
 },
 {
   test: /\.md$/,
   loader: "markdown-loader"
 }

　　大坑預警：我不知道在哪裡抄的配置，一定不要配置option（配置了的話表格 程式碼 都不能好好轉化）

　　以上真的就完成了轉化了。是不是so easy ！！！ 再來換個皮膚（穿上衣服）

 

二、一定要引用CSS，找了很多樣式真的都特別的醜（當然可以自己寫，但是費時間啊）

　　強烈推薦

npm install github-markdown-css
import 'github-markdown-css'; //哪裡用markdown 就在哪裡引用 可以放在min.js

//自己也可以再調整調整 (貢獻一版 我們調整的一版樣式)
.markdown-body {
   padding: 20px;
   min-width: 200px;
   max-width: 900px;
   font-size: 12px;
   h2 {
      font-size: 18px;
      margin: 1em 0 15px;
      padding-top: 0.8em;
      padding-bottom: 0.8em;
   }
   h3 {
      font-size: 14px;
      margin: 22px 0 16px;
   }
   h4 {
      font-size: 13px;
      margin: 20px 0 16px;
   }
   h5 {
      font-size: 12px;
      margin: 16px 0 16px;
      font-weight: 700;
   }
   p {
      font-size: 12px;
      line-height: 24px;
      color: #666666;
      margin-top: 0px;
      margin: 8px 0;
      margin: 14px 0 14px;
   }
   pre {
      background-color: #eee;
      margin-bottom: 8px;
      margin-top: 8px;
      margin: 12px 0 12px;
   }
   blockquote {
      margin-bottom: 8px;
      margin-top: 8px;
      margin: 14px 0 14px;
      background-color: #eee;
      padding: 16px 16px;
   }
   tr {
      background-color: #f5f5f5;
   }
   code {
      background-color: #eee;
   }
   ul,
   ol,
   li {
      list-style: unset;
      font-size: 12px;
      line-height: 20px;
      color: #666666;
      margin-top: 0px;
      margin: 8px 0;
   }
   blockquote {
      border-color: #48b6e2;
   }
   table {
      display: table;
      width: 100%;
      max-width: 100%;
      margin-bottom: 20px;
   }
}


 

三、頁面運用（實踐檢驗真理）

頁面
<template>
    <div class="markdown-body" v-html="htmlMD"></div> //markdown-body 一定要寫這個class名
</template>

<script>
export default {
    name: 'GitBook',
    data() {
        return {
            htmlMD: ''
        };
    },
    mounted() {
        this.getHtmlMD(this.$route.query.databaseType);
    },
    methods: {
        getHtmlMD(type) {
            this.htmlMD = require(`./GitBook/${type.toLowerCase()}.md`); //匯入md 我這裡根據不同的型別拿不同md檔案
        }
    }
};
</script>

 

四、最終效果 （表格，程式碼（縮排完全沒有問題）我懶的去寫一個例項了）打碼勿怪

　　

 

 

 

Fannie總結

　　經過兩個月的測試，這樣一套下來基本需求都滿足。

　　如果有編輯需求：推薦mavonEditor

相關文章