MarkDown
github: https://github.com/QingWei-Li/vue-markdown-loader
安装依赖
npm i vue-markdown-loader -D # 样式 npm i github-markdown-css -D npm i highlight.js -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, preventExtract: true }); };
使用
<template> <!-- class markdown-body 必须加,否则标签样式会出现问题 --> <div class="markdown-body"> <about /> </div> </template> <script> import about from "./about.md"; // 代码高亮 import "highlight.js/styles/github.css"; // 其他元素使用 github 的样式 import "github-markdown-css"; export default { components: { about } }; </script>