vue導(dǎo)入.md文件的步驟（markdown轉(zhuǎn)HTML）

更新時(shí)間：2020年12月31日 08:38:58 作者：FannieGirl

這篇文章主要介紹了vue導(dǎo)入.md文件的步驟（markdown轉(zhuǎn)HTML），幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下

前言

　　剛接到這個(gè)需求的時(shí)候，覺(jué)得很簡(jiǎn)單（的確很簡(jiǎn)單）但是這玩意的坑真的也讓人無(wú)奈。

　　網(wǎng)上找了很多的資料，都沒(méi)有寫(xiě)出痛點(diǎn)（這就很難過(guò)了）。通過(guò)實(shí)踐并且在我們項(xiàng)目中平穩(wěn)運(yùn)行，想分享給后面的人

　　我的博客上也寫(xiě)了100多篇文章，點(diǎn)擊量有上萬(wàn)的也有個(gè)位數(shù)的，能夠幫助到他人這就是寫(xiě)作記錄的動(dòng)力。

需求

　　vue項(xiàng)目中可以良好展示markdown（只是展示功能沒(méi)有編輯功能）

痛點(diǎn)問(wèn)題

.md文件類(lèi)型，直接模塊加載（只有字符串，這得多難受，怎么維護(hù)呢），還是一個(gè)文件一個(gè)文件的好維護(hù)并且好修改復(fù)用
用第三方插件，只是md轉(zhuǎn)HTML，不帶樣式的（重點(diǎn)強(qiáng)調(diào) 沒(méi)有樣式?jīng)]有樣式）

解決方案

一、vue需要有markdown這樣良好的展示效果，什么樣的插件是最好的？

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

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

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

　　大坑預(yù)警：我不知道在哪里抄的配置，一定不要配置option（配置了的話表格代碼都不能好好轉(zhuǎn)化）

　　以上真的就完成了轉(zhuǎn)化了。是不是so easy ?。。?再來(lái)?yè)Q個(gè)皮膚（穿上衣服）

二、一定要引用CSS，找了很多樣式真的都特別的丑（當(dāng)然可以自己寫(xiě)，但是費(fèi)時(shí)間啊）

　　強(qiáng)烈推薦

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

//自己也可以再調(diào)整調(diào)整 (貢獻(xiàn)一版 我們調(diào)整的一版樣式)
.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;
 }
}

三、頁(yè)面運(yùn)用（實(shí)踐檢驗(yàn)真理）

頁(yè)面
<template>
 <div class="markdown-body" v-html="htmlMD"></div> //markdown-body 一定要寫(xiě)這個(gè)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`); //導(dǎo)入md 我這里根據(jù)不同的類(lèi)型拿不同md文件
 }
 }
};
</script>