第一種: 直接使用整個markdown文件作為vue組件或者頁面

參考文章(vue-cli2創(chuàng)建的vue項目)
1.安裝

npm install markdown-it --save

2.新建markdownLoader.js文件(自定義loader)

const markdown = require('markdown-it');

function markLoader(src) {
  const md = markdown({
    html: true,
    typographer: true,
  });
  const html = md.render(src);

  return (
    '<template>\n'
    + `<div class="markdown">${html}</div>\n`
    + '</template>\n'
  );
}
module.exports = markLoader;

3.在vue.config.js(如果沒有,在根目錄下自行創(chuàng)建)文件中配置

module.exports = {
  configureWebpack: config => {
    config.module.rules.push({
      // 處理markdown文件
      test: /\.md$/,
      use: [
        {
          loader: "vue-loader"
        },
        {
          loader: require.resolve("./src/common/markdownLoader")
        }
      ],
    },
    );
  }
};

4.新建測試文件test.md

# woshimarkdown測試文件

5.在router.js中引入test.md文件

import Router from 'vue-router';
import Test from '@/docs/test.md'; // 自己創(chuàng)建的文件夾目錄

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/test',
      name: 'test',
      component: Test,
    },
  ],
});

6.保存后重新啟動項目(尤其是修改自定義lodaer和vue.config.js配置文件,必須重新啟動項目生效)

第二種: vue組建中部分代碼塊展示markdown語法(不推薦使用,類似于在vue中嵌入markdown編輯器):

原文鏈接
1.安裝

npm install mavon-editor --save

2.引入
在 main.js 中引入以下字段：

 // 全局注冊
 // import with ES6
 import Vue from 'vue'
 import mavonEditor from 'mavon-editor'
 import 'mavon-editor/dist/css/index.css'

 Vue.use(mavonEditor)

如果引入css報錯,參考該鏈接
3.使用

<template>
    <div>
      <mavon-editor
        class="md"
        :value="value"
        :subfield="false"
        :defaultOpen="'preview'"
        :toolbarsFlag="false"
        :editable="false"
        :scrollStyle="true"
        :ishljs="true"
      ></mavon-editor>
    </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      value: '### test' // markdown語法
    };
  },
};
</script>

// 注釋
:value="detailContent.content"：引入要轉(zhuǎn)換的內(nèi)容
:subfield = "false"：開啟單欄模式
:defaultOpen = "'preview'"：默認展示預覽區(qū)域
:toolbarsFlag = "false"：關閉工具欄
:editable="false"：不允許編輯
scrollStyle="true"：開啟滾動條樣式(暫時僅支持chrome)
:ishljs = "true"：開啟代碼高亮