vue3中使用mxgraph

在Vue3中使用mxGraph需要先安装mxgraph库，可以通过npm安装：

npm install mxgraph --save

然后，在Vue组件中引入mxgraph库并创建一个mxGraph实例：

<template>
  <div ref="container" style="width: 100%; height: 100%;"></div>
</template>

<script>
import mxgraph from 'mxgraph';

export default {
  name: 'MyComponent',
  mounted() {
    const container = this.$refs.container;
    const mx = mxgraph({
      mxBasePath: 'mxgraph',
      mxLoadResources: false,
      mxLoadStylesheets: false,
    });
    const graph = new mx.mxGraph(container);
    // do something with the graph instance
  },
};
</script>

在上面的代码中，我们首先引入了mxgraph库，然后在mounted钩子函数中创建了一个mxGraph实例，并将其挂载到组件的DOM节点上。接下来就可以通过graph实例来操作mxGraph，例如添加节点、连接线等。

需要注意的是，mxgraph库需要引入mxClient.js文件，可以通过将mxClient.js文件复制到项目的public目录中，并在index.html文件中添加如下代码来引入：

<script src="%PUBLIC_URL%/mxClient.js"></script>