Vue3:显示 markdown 文档
序
之前我曾经制作过个人的 UI 组件库,当时也在npm
上发布了,并且也将 UI 组件展示在自己的gitee
页面上面,可访问地址:http://wzckongchengji.gitee.io/kongchengji/#/。
参考文章: 《在gitee码云上搭建一个网站》
不过当时我使用的是 Vue2,现在因为新学了Vue3
,准备使用Vue3
重写一遍这些组件。
第一步的话,先解决markdown
转html
的问题吧。组件的说明文件是markdown
编辑的,那么在网页上显示的话需要转换成html
。
v-md-editor
以前我使用的是vue-markdown-loader
库,现在准备使用v-md-editor
库,因为这是明确说明能够在Vue3
中使用。
vue-markdown-loader
在vue2
中配置vue-markdown-loader
时,需要在vue.config.js
中配置:
v-md-editor 使用
v-md-editor
中文官网:https://code-farmer-i.github.io/vue-markdown-editor/zh/
v-md-editor
分为 4 种组件:
轻量版编辑器
进阶版编辑器
预览组件
html 预览组件
考虑了一下,对 UI 组件库页面,我只需要展示markdown
解析出的html
页面即可,所以使用的组件应该是预览组件
。
安装
创建一个vue3
的vite
项目,创建命令:yarn create vite my-element-ui --template vue-ts
安装命令:
快速使用
在main.ts
中导入VMdPreview
预览组件
这里项目中如果使用了typescript
,此时使用import VMdPreview from '@kangc/v-md-editor/lib/preview';
导入预览模块可能会出现红色波浪线报错。
我尝试了一下安装@types/kangc__v-md-editor
,不过失败了。那么解决方案只能在main.ts
的同级目录中的vite-env.d.ts
中添加declare module
声明,这样就不会有报错了。
接下来创建一个toHtml.vue
组件,在内部调用v-md-preview
预览组件,数据通过:text
传入。
测试:
效果:
可以看到当前已经将markdown
的语句转换成了html
在界面上显示出来了。
那么实际创建一个.md
文件,将内容引入使用看看。
在router/index.ts
中直接引入 md 文件出现错误,语句:import markdownTxt from '@/assets/markdown/preview.md'
这里vite
中引入静态资源如md
等文件,需要在末尾加上?raw
就像这样:import markdownTxt from '@/assets/markdown/preview.md?raw'
可参考 Vite 静态资源处理:https://vitejs.cn/guide/assets.html
这样引入进来的就是 markdown 文件中的内容了,然后通过props
传递到toHtml.vue
组件内
组件中通过defineProps
接收数据
效果:
通过以上步骤,就可以将markdown
文件转换成页面中可显示的html
了,这种转换也是在个人博客网站开发中经常会用到的步骤
版权声明: 本文为 InfoQ 作者【空城机】的原创文章。
原文链接:【http://xie.infoq.cn/article/bcea3e1e6e8734d3d3b16ca9a】。
本文遵守【CC-BY 4.0】协议,转载请保留原文出处及本版权声明。
评论