Vue插入markdown的方式有很多,但是原理就是在webapck编译的时候将md文件编译成html。
要实现此功能需要以下4步:
1.安装text-loader
npm install text-loader --save-dev
// or
yarn add text-loader
2.进行webpack module配置
module:{
rules:[
{
test: /.md$/,
use: 'text-loader',
}
]
}
3.安装md解析器如vue-markdown
npm install vue-markdown --save-dev
// or
yarn add vue-markdown
4.在Vue文件里面引入md文件
<template>
<div>
<h1>
Ninecat-ui
</h1>
<vue-markdown>
{{ about }}
</vue-markdown>
</div>
</template>
<script>
import VueMarkdown from 'vue-markdown'
import about from '../../markdown/about.md'
export default {
name: 'About',
components: {
VueMarkdown
},
data () {
return {
about: about
}
}
}
</script>
完成以上几步就可以将md插入到VUE文件里面并解析了。
具体可以看下我的开源项目的实例:https://github.com/ninecat-ui/ninecat-ui