vue中使用展示Markdown文檔說明
更新時(shí)間：2025年10月25日 10:33:30 作者：Alice_sy314
文章介紹了如何在Vue項(xiàng)目中使用Markdown文檔,并展示了如何通過安裝和配置`markdown-it-vue`和`text-loader`來實(shí)現(xiàn)Markdown文檔的展示和下載
vue使用、展示Markdown文檔
使用Markdown文檔
下載markdown-it-vue
npm i markdown-it-vue --save
在對應(yīng)頁面進(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="請輸入內(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)文章
vue中的雙向數(shù)據(jù)綁定原理與常見操作技巧詳解
這篇文章主要介紹了vue中的雙向數(shù)據(jù)綁定原理與常見操作技巧,結(jié)合實(shí)例形式詳細(xì)分析了vue中雙向數(shù)據(jù)綁定的概念、原理、常見操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-03-03
vue動(dòng)態(tài)生成dom并且自動(dòng)綁定事件
本篇文章主要介紹了vue動(dòng)態(tài)生成dom并且自動(dòng)綁定事件，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-04-04
使用vue-cli創(chuàng)建項(xiàng)目并webpack打包的操作方法
本文給大家分享使用vue-cli創(chuàng)建項(xiàng)目基于webpack模板打包的配置方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-07-07
springboot?vue測試平臺前端項(xiàng)目查詢新增功能
這篇文章主要為大家介紹了springboot+vue測試平臺前端項(xiàng)目實(shí)現(xiàn)查詢新增功能，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
vue項(xiàng)目首屏加載時(shí)間優(yōu)化實(shí)戰(zhàn)
單頁面應(yīng)用的一個(gè)問題就是首頁加載東西過多，加載時(shí)間過長。特別在移動(dòng)端，單頁面應(yīng)用的首屏加載優(yōu)化更是繞不開的話題，這篇文章主要介紹了vue項(xiàng)目首屏加載時(shí)間優(yōu)化實(shí)戰(zhàn)，感興趣的小伙伴們可以參考一下2019-04-04
VSCode前端Vue項(xiàng)目引入Element-ui組件三步簡單操作方法
elementui相當(dāng)于一個(gè)庫,封裝好的內(nèi)容,我們引入到vue項(xiàng)目中,就可用庫中的內(nèi)容,這篇文章主要給大家介紹了關(guān)于VSCode前端Vue項(xiàng)目引入Element-ui組件的三步簡單操作方法,需要的朋友可以參考下2024-07-07
本文主要介紹了解決vuex?數(shù)據(jù)丟失問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
本文主要介紹了element table多層嵌套顯示的實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vue 重置組件到初始狀態(tài)的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
本文給大家詳細(xì)介紹了如何使用使用 vue.js腳手架工具vue-cli構(gòu)建大型單頁應(yīng)用的方法，非常的實(shí)用，有需要的小伙伴可以參考下2018-02-02