需求：在vue項(xiàng)目中導(dǎo)入并展示markdown文件（使用的vue-cli3）
在網(wǎng)上搜索了挺久毡泻，還是插件vue-markdown-loader比較好用
安裝 vue-markdown-loader
將markdown文件解析并編譯成html文件
npm install vue-markdown-loader -D
安裝 vue-loader 壤玫、vue-template-compiler
將文件渲染成vue組件
npm install vue-loader -D
npm install vue-template-compiler -D
安裝 github-markdown-css硕勿、highlight.js
美化樣式、高亮代碼
npm install github-markdown-css -D
npm install highlight.js -D
在vue.config.js中配置webpack
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
})
}
}
在main.js中引入樣式文件
// markdown樣式
import 'github-markdown-css'
// 代碼高亮
import 'highlight.js/styles/github.css'
在vue組件中使用
將md文件作為組件導(dǎo)入厦瓢，注意：class的值必須包含 markdown-body ，否則樣式無(wú)法生效！
<template>
<demo-md class="markdown-body"></demo-md>
</template>
<script>
import DemoMd from './demo.md';
export default {
components: {
DemoMd
}
}
</script>
效果
image.png
