vue中展示md文档

不念不忘少年蓝@ 2023-01-04 10:25 375阅读 0赞

### 1. 所需依赖 ###

1. github-markdown-css
    2. highlight.js
    3. vue-markdown-loader
    4. vue-template-compiler
    npm i github-markdown-css highlight.js vue-markdown-loader vue-template-compiler -D

### vue.config.js配置 ###

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
              })
    }

> 注意: 修改vue.config.js 之后 需要重启项目  
> ![vue新建文件夹][vue]

#### index.vue 页面里面 ####

<template>
        <div class="container">
            <div class="content">
                <div class="markdown-body">
                    <Docu />
                </div>
            </div>
        </div>
    </template>
    
    <script>
    import Docu from './docu.md'
    import 'highlight.js/styles/github.css'
    // 其他元素使用 github 的样式
    import 'github-markdown-css'
    export default { 
        components: { 
            Docu
        }
    }
    </script>
    
    <style lang="scss" scoped>
    .container { 
        height: 100%;
        background: #f1f1f1;
        .content { 
            min-width: 800px;
            max-width: 1200px;
            margin: 0 auto;
            height: 100%;
            box-sizing: border-box;
            padding: 10px 50px;
            background: #fff;
        }
    }
    </style>

> 最后页面展示

![页面展示][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTg2ODQw_size_16_color_FFFFFF_t_70]

> 结束 个人笔记

[vue]: /images/20221119/156428f0acbf4619b4428ade2f6b9819.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTg2ODQw_size_16_color_FFFFFF_t_70]: /images/20221119/26ab4e5fefd443b2aad6556f9cd6503e.png