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

た入场券 2023-02-22 12:25 23阅读 0赞

## 第一步：安装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等等...

打开浏览器查看效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200703162348564.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIxMjQzMDQ=,size_16,color_FFFFFF,t_70