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


Posted in Javascript onMay 31, 2020

使用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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
Javascript中实现String.startsWith和endsWith方法
Jun 10 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
js实现表格数据搜索
Aug 09 Javascript
详解Typescript 内置的模块导入兼容方式
May 31 #Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 #Javascript
JQuery获得内容和属性方法解析
May 30 #jQuery
JavaScript Window浏览器对象模型原理解析
May 30 #Javascript
基于canvasJS在PHP中制作动态图表
May 30 #Javascript
jQuery实现视频展示效果
May 30 #jQuery
vue实现购物车加减
May 30 #Javascript
You might like
深入array multisort排序原理的详解
2013/06/18 PHP
迅速确定php多维数组的深度的方法
2014/01/07 PHP
php 邮件发送问题解决
2014/03/22 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
Python文件夹与文件的操作实现代码
2014/07/13 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
python对一个数向上取整的实例方法
2020/06/18 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
生物学学生自我评价
2014/01/17 职场文书
心理学专业求职信
2014/06/16 职场文书
华清池导游词
2015/02/02 职场文书
浅析MySQL如何实现事务隔离
2021/06/26 MySQL
Python os和os.path模块详情
2022/04/02 Python