vue專案中要實現展示markdown檔案
阿新 • • 發佈:2018-12-19
網上有很多用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>