vue展示.md文件

需求:在vue项目中导入并展示markdown文件(使用的vue-cli3)

在网上搜索了挺久,还是插件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文件作为组件导入,注意:class的值必须包含 markdown-body ,否则样式无法生效!




效果

image.png

你可能感兴趣的:(vue展示.md文件)