vue中使用jsmind生成脑图

在Vue中使用jsMind生成脑图，首先需要安装jsMind库：

npm install jsmind

然后在Vue组件中引入jsMind并初始化脑图：

<template>
  <div ref="jsmindContainer" style="width: 100%; height: 600px;"></div>
</template>
 
<script>
import { jsMind } from 'jsmind';
 
export default {
  name: 'JsMindComponent',
  mounted() {
    const options = {
      container: this.$refs.jsmindContainer,
      editable: true, // 是否允许编辑
      theme: 'default' // 主题
    };
 
    const mind = {
      meta: {
        name: 'Demo Mind',
      },
      format: 'node_tree',
      data: {
        id: 'root',
        topic: '中国程序员大脑图',
        children: [
          {
            id: '1',
            topic: '编程语言',
            children: [
              { id: '1.1', topic: 'Python' },
              { id: '1.2', topic: 'JavaScript' },
              { id: '1.3', topic: 'Java' },
              { id: '1.4', topic: 'C++' },
            ],
          },
          {
            id: '2',
            topic: '编程工具',
            children: [
              { id: '2.1', topic: 'Visual Studio Code' },
              { id: '2.2', topic: 'IntelliJ IDEA' },
              { id: '2.3', topic: 'PyCharm' },
            ],
          },
          {
            id: '3',
            topic: '编程框架',
            children: [
              { id: '3.1', topic: 'Vue.js' },
              { id: '3.2', topic: 'React.js' },
              { id: '3.3', topic: 'Angular' },
            ],
          },
        ],
      },
    };
 
    this.jsMind = new jsMind(options);
    this.jsMind.load(mind);
  },
  beforeDestroy() {
    if (this.jsMind) {
      this.jsMind.free();
    }
  },
};
</script>

在上述代码中，我们首先在<template>中定义了用于jsMind的容器，并通过ref属性为其设置了引用名。在<script>中，我们导入了jsMind并在mounted生命周期钩子中初始化了脑图。mind对象定义了脑图的基本结构和数据。在beforeDestroy钩子中，我们确保在组件销毁前释放jsMind实例以避免内存泄漏。