vue中引入mxGraph

第一步：下載npm包

npm install mxgraph --save

第二步：新建一個index.js文件

文件內容以下

import mx from 'mxgraph';
const mxgraph = mx({
  mxImageBasePath: './src/images',
  mxBasePath: './src'
});
// decode bug https://github.com/jgraph/mxgraph/issues/49
window.mxGraph = mxgraph.mxGraph;
window.mxGraphModel = mxgraph.mxGraphModel;
window.mxEditor = mxgraph.mxEditor;
window.mxGeometry = mxgraph.mxGeometry;
window.mxDefaultKeyHandler = mxgraph.mxDefaultKeyHandler;
window.mxDefaultPopupMenu = mxgraph.mxDefaultPopupMenu;
window.mxStylesheet = mxgraph.mxStylesheet;
window.mxDefaultToolbar = mxgraph.mxDefaultToolbar;

export default mxgraph;

這個是官方引入的方法。它將返回一個接受對象做爲選析那個的工廠函數。必須將mxBasePath選項提供給工廠函數，而不是將其定義爲一個全局變量。
在vue使用時方法的指向會發生變化，因此將其掛載到window上。

第三步：在index.vue或其餘文件中引入

import mxgraph from 'index.js';
const {mxGraph, mxClient, mxCodec, mxUtils, mxConstants, mxPerimeter} = mxgraph;