前言

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

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

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

需求

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

痛點(diǎn)問題 .md文件類型，直接模塊加載（只有字符串，這得多難受，怎么維護(hù)呢），還是一個(gè)文件一個(gè)文件的好維護(hù)并且好修改復(fù)用 用第三方插件，只是md轉(zhuǎn)HTML，不帶樣式的（重點(diǎn)強(qiáng)調(diào) 沒有樣式?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 ?。?！ 再來換個(gè)皮膚（穿上衣服）

二、一定要引用CSS，找了很多樣式真的都特別的丑（當(dāng)然可以自己寫，但是費(fèi)時(shí)間?。?p>強(qiáng)烈推薦

npm install github-markdown-cssimport ’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ùn)用（實(shí)踐檢驗(yàn)真理）

頁面<template> <div v-html='htmlMD'></div> //markdown-body 一定要寫這個(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ù)不同的類型拿不同md文件 } }};</script>四、最終效果 （表格，代碼（縮進(jìn)完全沒有問題）我懶的去寫一個(gè)實(shí)例了）打碼勿怪

以上就是vue導(dǎo)入.md文件的步驟（markdown轉(zhuǎn)HTML）的詳細(xì)內(nèi)容，更多關(guān)于vue 導(dǎo)入.md文件的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！