快捷導(dǎo)航

Vue?展示.md文件的方法詳解

更新時(shí)間：2023年05月23日 09:52:27 作者：心動止于人海。

這篇文章主要介紹了Vue?展示.md文件的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1.下載所需package

npm i vue-markdown-loader -D
npm i vue-loader@14.2.2 -D

npm vue-template-compiler -D (若是已經(jīng)有則不需要安裝，不然有可能和現(xiàn)有的vue版本不匹配從而報(bào)錯(cuò))

vue-loader版本過高會不兼容，經(jīng)過測試安裝14.2.2版本可以使用

vue-template-compiler需要和vue的版本一致

（若是直接安裝vue-loader最新版會提示升級vue和vue-compiler,但是升級后的vue沒有和vue-template-compiler匹配的版本，所以我選擇降低vue-loader版本）

# 樣式
npm i github-markdown-css -D
npm i highlight.js -D

2.在vue.config.js配置

module.exports = {
  publicPath: './',
  chainWebpack: (config) => {
    config.module.rule('md')
    .test(/\.md/)
    .use('vue-loader')
    .loader('vue-loader')
   .end()
   .use('vue-markdown-loader')
   .loader('vue-markdown-loader/lib/markdown-compiler')
   .options({
     raw: true
   })
  },
}

3.在頁面使用

<template>
<!-- class markdown-body 必須加，否則標(biāo)簽樣式會出現(xiàn)問題 -->
<div class="markdown-body">
<markdown />
</div>
</template>
<script>

4.js引入

<script>
// 引? markdown ?件，引?后是?個(gè)組件，需要在 components 中注冊
import markdown from '@/assets/md/Android_MQTT.md'
// 代碼?亮
import 'highlight.js/styles/github.css'
import 'github-markdown-css'
// 其他元素使? github 的樣
export default {
  components: { markdown }
}
</script>

到此這篇關(guān)于Vue 展示.md文件的文章就介紹到這了,更多相關(guān)Vue 展示.md文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue.config.js中配置Vue的路徑別名的方法
這篇文章主要介紹了vue.config.js中配置Vue的路徑別名的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
Vue修改Dom不生效的解決
這篇文章主要介紹了Vue修改Dom不生效的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
vue大型項(xiàng)目之分模塊運(yùn)行/打包的實(shí)現(xiàn)
這篇文章主要介紹了vue大型項(xiàng)目之分模塊運(yùn)行/打包的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-09-09
vue下如何利用canvas實(shí)現(xiàn)在線圖片標(biāo)注
這篇文章主要介紹了vue下如何利用canvas實(shí)現(xiàn)在線圖片標(biāo)注，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
為Vue3?組件標(biāo)注?TS?類型實(shí)例詳解
這篇文章主要為大家介紹了為Vue3?組件標(biāo)注?TS?類型實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
關(guān)于Vue3過渡動畫的踩坑記錄
在開發(fā)中我們想要給一個(gè)組件的顯示和消失添加某種過渡動畫,可以很好的增加用戶體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于Vue3過渡動畫踩坑的相關(guān)資料,需要的朋友可以參考下
2021-12-12
vue新手入門出現(xiàn)function () { [native code]&nbs
這篇文章主要介紹了vue新手入門出現(xiàn)function () { [native code] }錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue項(xiàng)目中created()被調(diào)用多次的踩坑實(shí)戰(zhàn)
在vue項(xiàng)目中我在created中調(diào)用了兩次get數(shù)據(jù)請求,所以下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中created()被調(diào)用多次的踩坑實(shí)戰(zhàn),需要的朋友可以參考下
2023-03-03
vue單頁面如何解決多個(gè)視頻同時(shí)僅能播放一個(gè)問題
這篇文章主要介紹了vue單頁面如何解決多個(gè)視頻同時(shí)僅能播放一個(gè)問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue3源碼通過render?patch?了解diff
這篇文章主要為大家介紹了Vue3源碼系列通過render及patch了解diff原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11