vue3使用MarkDown编辑器并预览以及报错解决办法

halo小伙伴们，上一篇小编有写到微信小程序渲染MarkDown，现在小编带来vue3的web项目渲染MarkDown。
这里使用的v-md-editor 是基于 Vue 开发的 markdown 编辑器组件

安装支持vue3的版本：

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

一、实现MarkDown编辑器

在vue3中注册：

import { createApp } from 'vue';
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 Prism from 'prismjs';

VueMarkdownEditor.use(vuepressTheme, {
  Prism,
});

const app = createApp(/*...*/);

app.use(VueMarkdownEditor);

使用：

<v-md-editor v-model="text" height="400px">v-md-editor>

即可实现MarkDown编辑器

二、实现MarkDown渲染

在vue3中引用

import { createApp } from 'vue';
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';

// highlightjs
import hljs from 'highlight.js';

VMdPreview.use(githubTheme, {
  Hljs: hljs,
});

const app = createApp(/*...*/);

app.use(VMdPreview);

或者

在对应的页面上引用

import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';

VMdPreview.use(githubTheme, {
	Hljs: hljs,
});

使用：

<v-md-preview :text="text">v-md-preview>

即可实现MarkDown渲染

防踩坑

在这里小编有遇到一个坑，有可能会报错如下：

TS7016: Could not find a declaration file for module '@kangc/v-md-editor/lib/preview'. 'G:/project/xy-yxf-pc/node_modules/@kangc/v-md-editor/lib/preview.js' implicitly has an 'any' type.   Try `npm i --save-dev @types/kangc__v-md-editor` if it exists or add a new declaration (.d.ts) file containing `declare module '@kangc/v-md-editor/lib/preview';`

和

TS7016: Could not find a declaration file for module '@kangc/v-md-editor/lib/theme/github.js'. 'G:/project/xy-yxf-pc/node_modules/@kangc/v-md-editor/lib/theme/github.js' implicitly has an 'any' type.   Try `npm i --save-dev @types/kangc__v-md-editor` if it exists or add a new declaration (.d.ts) file containing `declare module '@kangc/v-md-editor/lib/theme/github.js';`

解决方法

1. 在项目的根目录中创建一个新的==.d.ts文件，例如v-md-editor.d.d.ts==。
2. 打开v-md-editor.d.ts文件，并添加以下内容：

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

这样就不会报错啦。
好啦，快去试试吧。大家如果还有什么好的解决方法记得和小编分享哦~