vue-cli3項(xiàng)目展示本地Markdown文件的方法
【版本】
- vue-cli3
- webpack@4.33.0
【步驟】1、安裝插件vue-markdown-loader
npm i vue-markdown-loader -D
ps：這個(gè)插件是基于markdown-it的，不需要單獨(dú)安裝markdown-it。
2、修改vue.config.js配置文件（如果沒有，在項(xiàng)目根目錄新建一個(gè)）：
module.exports = {
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、直接上代碼
App.vue
<template>
<my-markdown></my-markdown>
</template>
<script>
import myMarkdown from './assets/cpu.md';
export default {
components: {
myMarkdown
},
</script>
正常情況下，到這里就結(jié)束了。
【坑】
由于業(yè)務(wù)給我的Markdown文檔的標(biāo)題是這樣的：
##物理CPU個(gè)數(shù)
物理CPU數(shù)就是主板上實(shí)際插入的CPU數(shù)量
……
得到的結(jié)果并不讓我滿意：
折騰了大半天才發(fā)現(xiàn)，這是由于標(biāo)題的#井號和文字之間沒有空格導(dǎo)致的。證明見下：
var MarkdownIt = require('markdown-it'),
md = new MarkdownIt();
console.log(md.render('# markdown-it rulezz!'))//<h1>markdown-it rulezz!</h1>
console.log(md.render('#markdown-it rulezz!'))//<p>#markdown-it rulezz!</p>
Fine :)
愚蠢的我想出了一個(gè)解決辦法：
因?yàn)?a target="_blank" rel="external nofollow" rel="external nofollow" >HyperDown.js能避免上面那樣的情況，于是我用它來對文檔做預(yù)處理。
npm install hyperdown -D
然后把vue.config.js改成了這樣。
let HyperDown = require('hyperdown');
let parser = new HyperDown;
module.exports = {
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({
// markdown-it config
preset: 'default',
breaks: true,
raw: true,
typographer: true,
preprocess: function(markdownIt, source) {
return parser.makeHtml(source);//重點(diǎn)在這里！??！
}
})
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue Element前端應(yīng)用開發(fā)之獲取后端數(shù)據(jù)
這篇文章主要介紹了Vue Element前端應(yīng)用開發(fā)之獲取后端數(shù)據(jù)，對vue感興趣的同學(xué)，可以參考下2021-05-05
在vite項(xiàng)目中使用@進(jìn)行文件的引入方式
這篇文章主要介紹了在vite項(xiàng)目中使用@進(jìn)行文件的引入方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue如何使用本地JSON文件問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue實(shí)現(xiàn)回到頂部和底部動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)回到頂部和底部動(dòng)畫效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了詳解express鑒權(quán)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
關(guān)于vue設(shè)置環(huán)境變量全流程
這篇文章主要介紹了關(guān)于vue設(shè)置環(huán)境變量全流程，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
基于vue-cli、elementUI的Vue超簡單入門小例子（推薦）
這篇文章主要介紹了基于vue-cli、elementUI的Vue超簡單入門小例子，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue+webpack實(shí)現(xiàn)懶加載過程解析
這篇文章主要介紹了Vue+webpack實(shí)現(xiàn)懶加載過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
Vue/React子組件實(shí)例暴露方法(TypeScript)
最近幾個(gè)月都在用TS開發(fā)各種項(xiàng)目，框架有涉及到Vue3,React18等，記錄一下Vue/React組件暴露出變量/函數(shù)的方法的寫法，對vue?react組件暴露方法相關(guān)知識感興趣的朋友跟隨小編一起看看吧2022-11-11
ant design vue導(dǎo)航菜單與路由配置操作
這篇文章主要介紹了ant design vue導(dǎo)航菜單與路由配置操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10