Vue2.0 + jsmind：开发思维导图

天外天-亮2026-04-11 11:41

注意vue2，jsmind（最新版的 0.9.1）直接引入会失败，

复制代码

import 'jsmind/style/jsmind.css'  //样式
import jsMind from 'jsmind'

ERROR Failed to compile with 1 error 10:02:54

error in ./node_modules/jsmind/es6/jsmind.js

Module parse failed: Unexpected token (8:38369)

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

这个错误通常是因为 jsmind 库发布了 ES6+ 语法的代码（如 class、箭头函数等），但你的项目 Webpack 配置没有将其纳入 Babel 转译范围，或者你引用的路径不对。

如果必须使用当前的导入方式，你需要告诉 Webpack 的 Babel Loader 去处理 jsmind 这个第三方库。

复制代码

module.exports = {
  transpileDependencies: ['jsmind']
}

也可以试试这个，不过该方式下引入将无法使用新版选项更改样式或渲染方式之类的

import jsMind from 'jsmind/js-legacy/jsmind.js'

上面的问题在 vue3.0中是不会出现的

使用起来还是很方便的

复制代码

const convertedData = {
  "id": "root",
   "topic": "jsMind",
   "children": [
       {
         "id": "easy",
          "topic": "Easy",
          "direction": "left",
          "expanded": false,
          "children": [
              { "id": "easy1", "topic": "Easy to show" },
              { "id": "easy2", "topic": "Easy to edit" },
              { "id": "easy3", "topic": "Easy to store" },
           ]
        }
     ]
}
var mind = {
    meta: {
        name: 'demo',
        author: 'hizzgdev@163.com',
        version: '0.2',
    },
    format: 'node_tree',
    data: convertedData,
};
var options = {
    container: 'jsmind_container',
    editable: true,
    theme: null, // primary
    view: {
        engine: 'canvas',
        draggable: true,
        enable_device_pixel_ratio: false,
    }
};
var jm = new jsMind(options);
jm.show(mind);

// 更新数据
const newData= {};
const mind = {
   meta: {
     name: 'li',
     author: 'test',
     version: '0.2'
   },
   format: 'node_tree',
   data: newData
 };
 // show 方法会重绘整个画布，达到覆盖效果
 jm.show(mind);

提示这个 topic可以直接这么写，这样即使很复杂的样式也能很简单的实现

topic: '<div class="box">1111</div>'