安装
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 };
},
});