vue使用、展示Markdown文档

使用Markdown文档

1. 下载markdown-it-vue npm i markdown-it-vue --save
2. 在对应页面进行引入,并放入compontents中 import MarkdownItVue from markdown-it-vue; import markdown-it-vue/dist/markdown-it-vue.css
3. 使用输入框和markdown-it-vue配合实现

<div class=textarea_area area>
        <el-input
          type="textarea"
          autosize
          placeholder="请输入内容"
          v-model="content">
        </el-input>
      </div>
      <div class=markdown_area area>
        <markdown-it-vue class="md-body" :content="content" />
      </div>
<script>
import MarkdownItVue from markdown-it-vue
import markdown-it-vue/dist/markdown-it-vue.css
export default {
          
   
  components:{
          
   MarkdownItVue},
  data() {
          
   
    return {
          
   
      content:"",
    }
  },
 }
 </script>

展示Markdown文档

在上述基础上

1. 下载text-loader npm i text-loader --save
2. 配置webpack.base.config.js，在rules中加入 { test: /.md$/, loader: text-loader,}
3. 引入相关md文件 import documentation from ./documentation.md
4. 将文件作为变量显示在markdown-it-vue上

<div class=markdown_wrapper_content>
        <div class=markdown_area area>
          <markdown-it-vue class="md-body" :content="content" />
        </div>
      </div>
<script>
import MarkdownItVue from markdown-it-vue
import documentation from ./documentation.md
import markdown-it-vue/dist/markdown-it-vue.css
export default {
          
   
  components:{
          
   MarkdownItVue},
  data() {
          
   
    return {
          
   
      content:documentation,
    }
  },
 }
 </script>