教程-Vue文件里面如何插入markdown

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