Vue封装Markdown组件介绍文档

安装

vite-plugin-markdown：

一个插件可以让你导入Markdown文件作为各种格式的vite项目。

github-markdown-css：

复制GitHub Markdown风格

pnpm i github-markdown-css vite-plugin-markdown

main.js引入

import "github-markdown-css";

vite.config.ts配置

vite.config.js中配置vite-plugin-markdown插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const md = require("vite-plugin-markdown");

export default defineConfig({
  plugins: [vue(),
    md.plugin({
    mode: ["html", "vue"],
  }),]
})

封装MorkDown组件

<template>
  <article class="markdown-body" v-html="content"></article>
</template>

<script setup lang="ts">
// 传入的md文件
const props = defineProps({
  content: {
    type: String,
    required: true,
  },
});
</script>

创建doc展示页面

<template>
  <div class="doc"><router-view></router-view></div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
</script>

<style scoped lang="less">
.doc {
  text-align: left;
  margin: 200px;
}
</style>

创建展示文档页面路由

import { createRouter, createWebHistory } from "vue-router";
import { h } from "vue";
import Layout from "../layout/index.vue";
import MarkdownVue from "../components/MarkDown/index.vue";
const md = (string) => h(MarkdownVue, { content: string, key: string });
import { html as Intro } from "../view/Doc/Vue封装Markdown组件介绍文档.md";
const IntroDoc = md(Intro);

const routes = [
  {
    path: "/",
    redirect: "/login",
  },
  {
    path: "/login",
    name: "login",
    component: () => import("../view/Login/index.vue"),
    meta: {
      title: "登录",
    },
  },
  {
    path: "/Doc/index",
    name: "Doc",
    component: () => import("../view/Doc/index.vue"),
    children: [{ path: "intro", component: IntroDoc }],
    meta: {
      title: "文档",
    },
  },
];

export default createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior() {
    // 始终滚动到顶部
    return { top: 0 };
  },
});

页面效果