vue展示md文件
先安装插件,可以用来编辑md文件,和展示文件:npm install mavon-editor -S在全局中引用// 引入makrdown插件import mavonEditor from 'mavon-editor'import 'mavon-editor/dist/css/index.css'Vue.use(mavonEditor)然后,你发现导入的md文件报错...
·
先安装插件,可以用来编辑md文件,和展示文件:
npm install mavon-editor -S
在全局中引用
// 引入makrdown插件
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)
然后,你发现导入的md文件报错了,需要在base文件里添加loader;
{
test: /\.md$/,
use: [
{
loader: "html-loader"
},
{
loader: "markdown-loader",
options: {
}
}
]
再下载插件,不然解析md文件会报错
$ npm i markdown-loader html-loader --save-dev
最后就可以展示md文件了:
<template>
<div class="mavonEditor">
<mavon-editor class="md" v-html="handbook" :subfield="false" :toolbarsFlag="false" :boxShadow="false" :ishljs="true" />
</div>
</template>
<script>
import GUID from '../guid/guid.md';
export default {
data() {
return {
markdownOption: {
bold: true, // 粗体
},
handbook: GUID
};
}
};
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)