MxGraph从入门到精通之5：在Vue项目中使用MxGraph

第一步：安装npm包

npm install mxgraph

第二步：在mxgraph.vue中使用mxgraph

<template> <div> <div ref="graphContainer"> </div> </div> </template> <script> import mx from 'mxgraph' export default { name: 'Application', data() { return { } }, mounted() { const mxgraph = mx({ mxImageBasePath: './src/images', mxBasePath: './src' }) const MxGraph = mxgraph.mxGraph var graph = new MxGraph(this.$refs.graphContainer) // Gets the default parent for inserting new cells. This // is normally the first child of the root (ie. layer 0). var parent = graph.getDefaultParent() // Adds cells to the model in a single step graph.getModel().beginUpdate() try { const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30) const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30) graph.insertEdge(parent, null, '', v1, v2) } finally { // Updates the display graph.getModel().endUpdate() } } } </script>

运行vue项目，查看效果

运行vue项目：

npm run serve # 根据package.json中的配置，可能是npm run dev等等...

打开浏览器查看效果：