我想在 VersionLog.vue 文件 直接引入 markdown ,要怎么做，
在网上找的都是 markdown 编辑器，我不要那种的，我需要能直接解析掉，不用编辑器
VersionLog.vue
<template lang="html">
<div class="" id='editor'>
<!-- Log start -->
<div class="article" v-html="compiledMarkdown"></div>
<!-- Log end -->
</div>
</template>
<script>
import marked from 'marked'
export default {
name: 'Log',
data () {
return {
context: ""
}
},
computed:{
compiledMarkdown () {
return marked(this.context, { sanitize: true })
}
}
}
</script>
回复 (15)
markdown–loader
来自酷炫的 CNodeMD
@liuqipeng417 之后，怎么写？webpack 需要进行相关配置么？
@x-cold sorry,没看懂，我现在还是比较倾向用 fs 读成字符串，然后在使用，但是，在 vue 文件 import fs 直接报错，不知道该怎么写
厨房风格
@vxhly 应该是loader没配置好
有人会用 fs 来读取 markdown 文件么
直接在编译阶段就解析成 html 的话，就搜 xx-loader
1，如果你要自己对markdown 文本进行编译处理，可以直接使用text-loader； 2，如果你需要webpack直接帮你将markdown直接编译成html，可直接使用markdown-loader; 3，如果你需要2且编译后的html支持vue，可以使用vue-markdown-loader；
end……
那你直接在webpack配置text-loader，然后import xxx from 'xxx.md';
xxx 即为你读取的markdown字符串
@178220709 所以该怎么配置？
x-cold 7楼 感谢！
1）安装npm install text-loader --save-dev
2）在webpack.config.js中添加
{
test: /.md$/,
loader: 'text-loader'
}
然后通过import XXX from 'xxx.md'，即可正确获取.md文件中的md原始内容。
3）安装md解析器如vue-markdown，npm install vue-markdown --save-dev
template:
{{msg}}
js:
import VueMarkdown from 'vue-markdown'
import xxx from 'XXX.md'
export default {
components: {
VueMarkdown
},
data () {
return {
msg: xxx
}
}
}