vue 展示md文件 并支持md样式

在封装组件库时，想要把md文件直接嵌套在页面内，并保证md的样式不变，网上找了很多方法都是v-html，只展示md文件的内容，样式并没有保存，下面说一下，我查完资料之后使用的方法。

image.png

1.在webpack.base.conf.js 的规则rules加入

 {
        test:/\.md$/,
        loader:'vue-markdown-loader',
        // options:vueMarkdown,
  },

2.安装插件

cnpm i vue-markdown-loader -D

3.加载md的样式

cnpm install github-markdown-css
在main.js中将github-markdown-css导入

image.png

4.使用

image.png

引用markdown-body样式类，将md文件导入，并引入在页面上即可。

5.注意

完成以上操作时，代码不能高亮显示，只需在项目中的公共css中加如下代码片段即可

/* markdown 高亮 */
.hljs-name{
    color: #22863a;
}
.hljs-attr{
    color: #6f42c1;
}
.hljs-keyword{
    color: red;
}
.hljs-string{
    color: #032f62;
}