当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Vue-cli3生成的Vue项目加载Mxgraph方法示例

Vue-cli3生成的Vue项目加载Mxgraph方法示例

2020年06月13日  | 移动技术网IT编程  | 我要评论

使用vue-cli3生成vue项目，并等待项目创建成功。

vue create [项目名]

安装mxgraph。

cnpm install mxgraph --save

安装exports-loader。

cnpm install exports-loader --save

安装script-loader。

cnpm install script-loader --save

在项目根目录新建vue.config.js文件。

将以下内容复制到vue.config.js文件中。

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  publicpath: './',
  outputdir: 'dist',
  lintonsave: true,
  chainwebpack: (config) => {
    config.module
      .rule('')
      .test(/mxclient\.js$/)
      .use('exports-loader')
      .loader('exports-loader?mxclient,mxgraphmodel,mxactor,mxshape,mxeventobject,mxgraph,mxprintpreview,mxeventsource,mxrectangle,mxvertexhandler,mxmouseevent,mxgraphview,mximage,mxgeometry,mxrubberband,mxkeyhandler,mxdragsource,mxgraphmodel,mxevent,mxutils,mxwindow,mxevent,mxcodec,mxcell,mxconstants,mxpoint,mxgraphhandler,mxcylinder,mxcellrenderer,mxevent,mxundomanager')
      .end();
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@assets', resolve('src/assets'));
    // 按这种格式.set('', resolve('')) 自己添加
  }
};

修改helloworld.vue，替换为以下内容。

<template>
  <div ref="graph_container"></div>
</template>

<script>
import {
  mxgraph
} from 'mxgraph/javascript/mxclient';

export default {
  name: 'helloworld',
  props: {
    msg: string
  },
  mounted() {
    // creates the graph inside the given container
    var graph = new mxgraph(this.$refs.graph_container);

    // 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 {
      let v1 = graph.insertvertex(parent, null, 'hello,', 20, 20, 80, 30);
      let v2 = graph.insertvertex(parent, null, 'world!', 200, 150, 80, 30);

      graph.insertedge(parent, null, '', v1, v2);
    } finally {
      // updates the display
      graph.getmodel().endupdate();
    }
  }
};
</script>

<!-- add "scoped" attribute to limit css to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

运行项目，查看效果。此demo的源码可以查看

到此这篇关于vue-cli3生成的vue项目加载mxgraph方法示例的文章就介绍到这了,更多相关vue项目加载mxgraph内容请搜索移动技术网以前的文章或继续浏览下面的相关文章希望大家以后多多支持移动技术网！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网