vite3.x + vue3.x + ts实现markdwon文件转为vue组件，实现预览功能

vite3.x + vue3.x + ts实现markdwon文件转为vue组件，实现预览功能

1. 安装

npm i -D vite-plugin-markdown

2. vite.config.ts配置

import mdPlugin from 'vite-plugin-markdown';

plugins: [
  // @ts-ignore
  mdPlugin.plugin({
    mode:['vue']   // 'vue','react','html','toc'
  }),
]

3. 在article.vue中使用

<template>
  <div class="help-container">
    <el-page-header class="header" @back="goBack" icon="EpArrowLeft">
      <template #content>
        <span class="text-large font-600 mr-3"> 开发手册 </span>
      </template>
    </el-page-header>
    <article>
      <MarkdownContent />
    </article>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
// @ts-ignore;
import { VueComponent as MarkdownContent } from "../../../README.md";
const router = useRouter();
const goBack = () => {
  router.back();
};
</script>

4. 美化

   1. 安装：

   npm install github-markdown-css
   

   2. 在article.vue使用：注意需要给显示markdown的容器加上class="markdown-body"

   <template>
       <article class="markdown-body">
         <MarkdownContent />
       </article>
   </template>
   <script setup lang="ts">
   // 引入样式
   import 'github-markdown-css';
   </script>
   <style scoped lang="scss">
   .markdown-body {
     box-sizing: border-box;
     min-width: 200px;
     max-width: 980px;
     margin: 0 auto;
     padding: 20px 45px;
   }
   
   @media (max-width: 767px) {
     .markdown-body {
       padding: 15px;
     }
   }
   </style>