1. 程式人生 > >vue專案中要實現展示markdown檔案

vue專案中要實現展示markdown檔案

網上有很多用vuepress的方法,我試了下,另外起一個vue程式的話,很容易實現該方法,但是如果是要嵌入到已有的vue專案中,我沒有嘗試成功,於是用了以下方法來實現。

1)安裝npm install text-loader --save

2)在webpack.base.config.js中新增
	{
		test: /.md$/,
		loader: ‘text-loader’
	}
然後通過import READMD from ‘./README.md’,即可正確獲取.md檔案中的md原始內容。

3)安裝md解析器如vue-markdown,npm install vue-markdown --save
vue檔案程式碼如下:
<template>
    <div>
        <h1>document</h1>
        <vue-markdown>{{msg}}</vue-markdown>
    </div>
</template>
<script>
import VueMarkdown from 'vue-markdown';
import README from './README.md';
export default {
    name:'document',
    components:{
        VueMarkdown
    },
    data(){
        return{
            msg:README
        }
    },
    methods:{

    }
}
</script>