记录Vue3如何安装 v-md-editor

前言

其实v-md-editor的文档已经写的很全了，只是自己比较菜，踩了很多的坑，特此记录一下
官方文档在这

正文

首先用npm或者yarm下载

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

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

我的node和npm版本如下

在下载v-md-editor的时候报了很多警告，但是目前来讲不影响后续的使用

然后在main.ts中进行注册

import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';

import hljs from 'highlight.js';

VueMarkdownEditor.use(vuepressTheme, {
    hljs,
});
createApp(App).use(VueMarkdownEditor).mount('#app')

但是仅仅如此是不能使用的，编译器会报错，好像是因为是main.ts的原因，所以我们需要在src目录下创建一个叫shims.d.ts的文件，将以下的代码添加进去

declare module '@kangc/v-md-editor/lib/theme/vuepress.js';
declare module '@kangc/v-md-editor';

之后便正常使用了

成果图

<template>
  <div class="greetings">
    <v-md-editor height="400px"></v-md-editor>
  </div>
</template>


<script lang="ts" setup>

</script>

<style scoped>
.greetings {
  margin: 0;
  width: 800px;
}
</style>