Vue?展示.md文件的方法詳解
更新時(shí)間：2023年05月23日 09:52:27 作者：心動(dòng)止于人海。
這篇文章主要介紹了Vue?展示.md文件的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(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版本過(guò)高會(huì)不兼容，經(jīng)過(guò)測(cè)試安裝14.2.2版本可以使用
vue-template-compiler需要和vue的版本一致
（若是直接安裝vue-loader最新版會(huì)提示升級(jí)vue和vue-compiler,但是升級(jí)后的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.在頁(yè)面使用
<template> <!-- class markdown-body 必須加，否則標(biāo)簽樣式會(huì)出現(xiàn)問(wèn)題 --> <div class="markdown-body"> <markdown /> </div> </template> <script>
4.js引入
<script>
// 引? markdown ?件，引?后是?個(gè)組件，需要在 components 中注冊(cè)
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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vuecli項(xiàng)目構(gòu)建SSR服務(wù)端渲染的實(shí)現(xiàn)
這篇文章主要介紹了vuecli項(xiàng)目構(gòu)建SSR服務(wù)端渲染的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
vue后臺(tái)返回格式為二進(jìn)制流進(jìn)行文件的下載方式
這篇文章主要介紹了vue后臺(tái)返回格式為二進(jìn)制流進(jìn)行文件的下載方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue中使用百度腦圖kityminder-core二次開發(fā)的實(shí)現(xiàn)
這篇文章主要介紹了vue中使用百度腦圖kityminder-core二次開發(fā)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
elementUI中el-upload文件上傳的實(shí)現(xiàn)方法
ElementUI的組件支持多種事件鉤子,如http-request、before-upload和on-change,以實(shí)現(xiàn)自定義文件上傳處理,這篇文章主要介紹了elementUI中el-upload文件上傳的實(shí)現(xiàn)方法,需要的朋友可以參考下2024-11-11
這篇文章主要為大家詳細(xì)介紹了Vue中正確使用jQuery的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
Vue?Baidu?Map之自定義點(diǎn)圖標(biāo)bm-marker的示例
這篇文章主要介紹了Vue?Baidu?Map之自定義點(diǎn)圖標(biāo)bm-marker,文中給大家介紹了vue-baidu-api地圖標(biāo)記點(diǎn)（自定義標(biāo)記圖標(biāo)），設(shè)置標(biāo)記點(diǎn)的優(yōu)先級(jí)問(wèn)題，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-08-08
vue.js的手腳架vue-cli項(xiàng)目搭建的步驟
這篇文章主要介紹了vue.js的手腳架vue-cli項(xiàng)目搭建的步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
vite多頁(yè)面配置項(xiàng)目實(shí)戰(zhàn)
vite官方文檔中有關(guān)于多頁(yè)面應(yīng)用模式如果配置的說(shuō)明,下面這篇文章主要給大家介紹了關(guān)于vite多頁(yè)面配置的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
postcss一種對(duì)css編譯的工具，類似babel對(duì)js的處理，postcss只是一個(gè)工具，本身不會(huì)對(duì)css一頓操作，它通過(guò)插件實(shí)現(xiàn)功能，autoprefixer就是其一2023-02-02
在不同的前端項(xiàng)目中使用相同的axios封裝有利于保持一致性,有利于數(shù)據(jù)之間的傳遞和處理,本文主要提供兩種對(duì)axios進(jìn)行封裝的思路,有需要的小伙伴可以參考一下2023-10-10