vue2中使用markmap渲染思维导图

问题

我直接跟着markmap官方提供的vue版本例子https://stackblitz.com/edit/markmap-vue?file=src%2Fapp.vue
下载三个依赖包：markmap-lib、markmap-view、markmap-common

运行项目发现报错：You may need an appropriate loader to handle this file type

查找发现按照这个https://blog.csdn.net/weixin_42115781/article/details/132978545可以解决问题

解决

我的环境：vue2，node 16版本
需要下载的markmap：markmap-lib@0.15.4、markmap-view@0.15.4、markmap-common@0.15.3
再次运行没问题

使用

新建一个组件

<template>
  <div>
    <svg id="markmap" style="width: 300px;height: 300px;"></svg>
  </div>
</template>

<script>
import { Transformer } from 'markmap-lib';
import { Markmap } from 'markmap-view';

export default {
  name: 'MarkdownRenderer',
  props: {
    content: {
      type: String,
      required: true,
    },
  },
  mounted() {
    this.renderMarkmap();
  },
  watch: {
    content() {
      this.$nextTick(this.renderMarkmap());
    },
  },
  methods: {
    renderMarkmap() {
      if (!this.content) return;

      const transformer = new Transformer();
      const { root } = transformer.transform(this.content);
      Markmap.create('#markmap',null, root)
    },
  },
};
</script>

在需要用到的页面使用

<template>
  <div>
    <MarkmapRender :content="markdownContent"></MarkmapRender>
  </div>
</template>

<script>
export default{
	components: {MarkmapRender },
	data(){
		return {
			markdownContent:`# markmap

			- beautiful
			- useful
			- easy
			- interactive
			`,
		}
	}
}
</script>

package.json里的版本问题

以上npm install markmap后，package.json里的可能会显示成下图这样

但这样可能会在打包或者别人拉你的项目重新install时会出问题
应该改成这样