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