怎么在 vue 文件直接引入 markdown 进行解析

问答

Vvxhly发布于 9 年前最后回复 9 年前

15169460

我想在 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>

查看回复

vxhly#159 年前

引用 sherleysongx cold 7楼感谢！ 1）安装npm install text loader save dev 2）在webpack.config.js中添加 { test: /\.md$/, load...

@sherleysong 多谢，

sherleysong#149 年前

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 } } }

vxhly#139 年前

引用 JsonSong89@vxhly 应该是loader没配置好

@178220709 所以该怎么配置？

JsonSong89#129 年前

引用 vxhly@x cold 不行哦，还是有错

@vxhly 应该是loader没配置好

vxhly#119 年前

引用 x-cold那你直接在webpack配置text loader，然后import xxx from 'xxx.md'; xxx 即为你读取的markdown字符串

@x-cold 不行哦，还是有错

caoqinghui#109 年前

厨房风格

woshixiekunyu#99 年前

引用 zhuweiyou直接在编译阶段就解析成 html 的话，就搜 xx loader

测试回复

falost#89 年前

引用 vxhly@x cold sorry,没看懂，我现在还是比较倾向用 fs 读成字符串，然后在使用，但是，在 vue 文件 import fs 直接报错，不知道该怎么写

@vxhly 前端是不可以使用fs模块吧

falost

x-cold#79 年前

那你直接在webpack配置text-loader，然后import xxx from 'xxx.md';

xxx 即为你读取的markdown字符串

vxhly#69 年前

引用 x-cold1，如果你要自己对markdown 文本进行编译处理，可以直接使用text loader； 2，如果你需要webpack直接帮你将markdown直接编译成html，可直接使用markdown...

@x-cold sorry,没看懂，我现在还是比较倾向用 fs 读成字符串，然后在使用，但是，在 vue 文件 import fs 直接报错，不知道该怎么写

x-cold#59 年前

1，如果你要自己对markdown 文本进行编译处理，可以直接使用text-loader； 2，如果你需要webpack直接帮你将markdown直接编译成html，可直接使用markdown-loader; 3，如果你需要2且编译后的html支持vue，可以使用vue-markdown-loader；

end……

zhuweiyou#49 年前

直接在编译阶段就解析成 html 的话，就搜 xx-loader

vxhly#39 年前

有人会用 fs 来读取 markdown 文件么

vxhly#29 年前

引用 liuqipeng417markdown–loader 来自酷炫的 CNodeMD

@liuqipeng417 之后，怎么写？webpack 需要进行相关配置么？

liuqipeng417#19 年前

markdown–loader

来自酷炫的 CNodeMD

参与回复

登录后即可参与回复。登录

怎么在 vue 文件直接引入 markdown 进行解析

回复 (15)

参与回复