Markdown转vue项目组件插件

作用： 用于将vue项目中的markdown文件直接转为vue路由组件。

项目来源： B站教程，项目地址GitHub，由于原项目已停止维护且不满足我的需求，遂对其进行了部分修改。

1、使用

npm add -D vitepress # 插件依赖于vitepress，请确保已安装
npm add -D vite-plugin-mdtovue

在main.ts/main.js中引用样式：

import "vite-plugin-mdtovue/theme";

在vite.config.js/vite.config.ts中配置插件和vue识别markdown文件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { MD2Vue } from 'vite-plugin-mdtovue';

export default defineConfig({
  plugins: [ MD2Vue(), vue({ include: [/\.vue$/, /\.md$/] }) ]
})

2、配置

插件引用了vitepress的功能，所以许多配置完全可以遵循vitepress。在vite.config.js/vite.config.ts中，初始化插件时可以直接指定部分参数：

export default defineConfig({
  plugins: [MD2Vue({
    markdown: {
      lineNumbers: true, // 显示行号
      math: true,  // 支持数学公式，需要额外安装markdown-it-mathjax3插件，具体参考vitepress文档
      codeCopyButtonTitle: '复制',  // 复制按钮显示文字
      config: (md: MarkdownIt) => {
        md.use(markdown - it插件1)
            .use(markdown - it插件2);
      }
    },
    // 其他用户参数
  }), vue({include: [/\.vue$/, /\.md$/]})]
})

这当中的markdown参数为vuejs/vitepress项目中的MarkdownOptions接口，详细内容可根据版本查看原项目文件进行其他配置。