vue中使用展示Markdown文檔說(shuō)明
更新時(shí)間：2025年10月25日 10:33:30 作者：Alice_sy314
文章介紹了如何在Vue項(xiàng)目中使用Markdown文檔,并展示了如何通過(guò)安裝和配置`markdown-it-vue`和`text-loader`來(lái)實(shí)現(xiàn)Markdown文檔的展示和下載
vue使用、展示Markdown文檔
使用Markdown文檔
下載markdown-it-vue
npm i markdown-it-vue --save
在對(duì)應(yīng)頁(yè)面進(jìn)行引入,并放入compontents中
import MarkdownItVue from 'markdown-it-vue'; import 'markdown-it-vue/dist/markdown-it-vue.css'
使用輸入框和markdown-it-vue配合實(shí)現(xiàn)
<div class='textarea_area area'>
<el-input
type="textarea"
autosize
placeholder="請(qǐng)輸入內(nèi)容"
v-model="content">
</el-input>
</div>
<div class='markdown_area area'>
<markdown-it-vue class="md-body" :content="content" />
</div>
<script>
import MarkdownItVue from 'markdown-it-vue'
import 'markdown-it-vue/dist/markdown-it-vue.css'
export default {
components:{MarkdownItVue},
data() {
return {
content:"",
}
},
}
</script>
展示Markdown文檔
在上述基礎(chǔ)上
下載text-loader
npm i text-loader --save
配置webpack.base.config.js，在rules中加入
{ test: /\.md$/, loader: 'text-loader',}引入相關(guān)md文件
import documentation from './documentation.md'
將文件作為變量顯示在markdown-it-vue上
<div class='markdown_wrapper_content'>
<div class='markdown_area area'>
<markdown-it-vue class="md-body" :content="content" />
</div>
</div>
<script>
import MarkdownItVue from 'markdown-it-vue'
import documentation from './documentation.md'
import 'markdown-it-vue/dist/markdown-it-vue.css'
export default {
components:{MarkdownItVue},
data() {
return {
content:documentation,
}
},
}
</script>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
隨著用戶體驗(yàn)要求的不斷提升,快捷鍵的處理也成為了提高用戶操作效率的一個(gè)重要方面,本文將深入探討如何在?Vue?3?中高效地處理快捷鍵,希望對(duì)大家有所幫助2024-11-11
Vue?watch監(jiān)聽(tīng)使用的幾種方法
watch是由用戶定義的數(shù)據(jù)監(jiān)聽(tīng)，當(dāng)監(jiān)聽(tīng)的屬性發(fā)生改變就會(huì)觸發(fā)回調(diào)，這項(xiàng)配置在業(yè)務(wù)中是很常用。在面試時(shí)，也是必問(wèn)知識(shí)點(diǎn)，一般會(huì)用作和computed進(jìn)行比較。那么本文就來(lái)帶大家從源碼理解watch的工作流程，以及依賴收集和深度監(jiān)聽(tīng)的實(shí)現(xiàn)2022-12-12
深入探討Vue計(jì)算屬性與監(jiān)聽(tīng)器的區(qū)別和用途
在Vue的開(kāi)發(fā)中,計(jì)算屬性（Computed Properties）和監(jiān)聽(tīng)器（Watchers）是兩種非常重要的概念,它們都用于響應(yīng)式地處理數(shù)據(jù)變化,本文將帶你深入了解計(jì)算屬性和監(jiān)聽(tīng)器的區(qū)別,以及在何時(shí)使用它們,感興趣的朋友可以參考下2023-09-09
在本篇文章里小編給大家整理的是一篇關(guān)于Vue組件中使用防抖和節(jié)流實(shí)例分析內(nèi)容，有需要的朋友們可以學(xué)習(xí)參考下。2021-11-11
Vue實(shí)現(xiàn)實(shí)時(shí)更新sessionStorage數(shù)據(jù)的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue如何實(shí)現(xiàn)實(shí)時(shí)更新sessionStorage數(shù)據(jù)，文中的示例代碼講解詳細(xì)，具有一定的參考價(jià)值，需要的可以參考一下2023-06-06
本文重點(diǎn)介紹axios如何配合vue搭建項(xiàng)目框架,文章給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-07-07
使用Elemen加上lang=“ts“后編譯報(bào)錯(cuò)
本文主要介紹了使用Elemen加上lang=“ts“后編譯報(bào)錯(cuò)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
如何在 Vue 中使用 Axios 異步請(qǐng)求API
Axios 是 Javascript 中最受歡迎的 HTTP 庫(kù)之一，我們可以用它在 Vue 程序中調(diào)用API。在本文中我們用 Vue 3 和 Axios 寫(xiě)一個(gè)侃爺語(yǔ)錄小應(yīng)用，可以用這個(gè)小程序?qū)W習(xí)英語(yǔ)，同時(shí)也能從侃爺?shù)脑捴械玫揭恍﹩l(fā)，而且還可以學(xué)習(xí)用 Vue 異步請(qǐng)求API，一舉多得，何樂(lè)而不為呢？2021-05-05
vue項(xiàng)目如何引入json數(shù)據(jù)
這篇文章主要介紹了vue項(xiàng)目如何引入json數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue-week-picker實(shí)現(xiàn)支持按周切換的日歷
這篇文章主要為大家詳細(xì)介紹了vue-week-picker實(shí)現(xiàn)支持按周切換的日歷，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06