[Vue]使用 Markdown 作为 Vue 组件，支持主题切换

使用 Markdown 作为 Vue 组件。

vue是不支持直接读取md文件的，但是我们可以使用一些插件将md转换为可识别文件，比如unplugin-vue-markdown，本文章将结合pnpm+Vite+ts实现该功能。

1. 首先需要安装依赖

	pnpm i unplugin-vue-markdown

2. vue插件include中新增/.md$/，让vue识别md文件为vue组件，新增插件Markdown，用于将md解析为vue组件，在项目的根目录中的vite.config.ts中plugins属性中增加如下代码，

	import Markdown from 'unplugin-vue-markdown/vite';
	//...其他插件
	// 增加解析/\.md$/
	vue({
      include: [/\.vue$/, /*新增 ->>>*//\.md$/],
      script: {
        defineModel: true
      }
    }),
    // 以下新增部分
    Markdown({
      markdownItOptions: {
        html: true,
        linkify: true,
        typographer: true
      },
      wrapperClasses: ['']
    }),
	//...其他插件

3. 新增ts类型识别，在任意的.d.ts中新增如下代码，不然引入会报错

	declare module '*.md' {
	  import type { ComponentOptions } from 'vue';
	  const Component: ComponentOptions;
	  export default Component;
	}

接下来我们就可以引入md并当成一个Vue组件使用啦

	<template>
	  <V1 />
	</template>
	
	<script lang="tsx" setup>
	import V1 from './v1.md';
	</script>

示意图

添加样式并适应主题切换

1. 需要先获取md css样式这里推荐github-markdown-dark，将github-markdown-dark.css和github-markdown-light.css 复制下来添加到自己的项目style文件中。

2. 修改css样式，在两个css文件中替换css类名github-markdown-light.css中查询markdown-body替换markdown-body-light；github-markdown-dark.css中亦是如此
   

3. vue的main.ts中引入两个css,请根据自己的路径自行修改
   

4. 封装组件MarkDownPreview，动态绑定class以达到动态切换效果，useThemeStore请自行封装，这里不能使用结构拿出darkMode会造成响应式丢失

	<template>
	  <div class="p2" :class="theme.darkMode ? 'markdown-body-dark' : 'markdown-body-light'">
	    <slot></slot>
	  </div>
	</template>
	
	<script setup lang="ts">
	import { useThemeStore } from '@/store';
	
	defineOptions({ name: 'MarkDownPreview' });
	
	const theme = useThemeStore();
	</script>
	<style scoped></style>

我们修改对应的引用组件即可完成效果！

	<template>
	  <MarkDownPreview>
	    <V1 />
	  </MarkDownPreview>
	</template>
	
	<script lang="tsx" setup>
	import MarkDownPreview from '@/components/common/markdown-preview.vue';
	import V1 from './v1.md';
	</script>

教程结束！respect~