在封装组件库时，想要把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;
}
网友评论