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