Vue插入markdown的方式有很多，但是原理就是在webapck編譯的時候?qū)d文件編譯成html丐膝。
要實現(xiàn)此功能需要以下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
