Vue项目引入Markdown文档、自定义锚点跳转和图片加载问题解决

一、简介

Vue项目引入Markdown文档，主要涉及到在Vue应用中使用Markdown语言来编写和展示内容。像我们在写用户操作手册或者项目changeLog时，可以直接写成Markdown形式，然后引入到页面中，方便用户查看。

二、功能预览

三、v-md-editor

v-md-editor 是基于 Vue 开发的 markdown 编辑器组件。官网：介绍 | v-md-editor

1、安装

#vue2下载

# 使用 npm  
npm i @kangc/v-md-editor -S
# 使用yarn  
yarn add @kangc/v-md-editor


#vue3下载

# 使用 npm  
npm i @kangc/v-md-editor@next -S
# 使用 yarn 
yarn add @kangc/v-md-editor@next

2、引入注册

此处仅引入了预览组件，可查看官网，有介绍编辑组件的引入方式；

// main.js
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
import Prism from 'prismjs';
VMdPreview.use(vuepressTheme, {
  Prism,
});

let app = createApp(App).use(VMdPreview);

四、使用

1、html

<template>
  <div class="markdown">
    <!-- 目录 -->
    <div class="tocNavigation">
      <div v-for="anchor in titles" :key="index" :style="{ padding: `10px 0 10px ${anchor.indent * 20}px` }"
        @click="handleAnchorClick(anchor)" class="tocNavigation-item" :class="{ 'active': anchor.tagName == hTags[0] }">
        {
  { anchor.title }}
      </div>
    </div>
    <!-- markdown -->
    <v-md-p