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 相关文章推荐
JS实现匀速运动的代码实例
Nov 29 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
js实现模拟银行卡账号输入显示效果
Nov 18 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 Javascript
jQuery插件pagination实现无刷新分页
May 21 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 Javascript
vue计算属性get和set用法示例
Feb 08 Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
详解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
PHP 解决session死锁的方法
2013/06/20 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
javascript 写类方式之三
2009/07/05 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
React实现todolist功能
2020/12/28 Javascript
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
python+Django+apache的配置方法详解
2016/06/01 Python
基于python指定包的安装路径方法
2018/10/27 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
windows支持哪个版本的python
2020/07/03 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
求职信标题怎么写
2014/05/26 职场文书
Java使用JMeter进行高并发测试
2021/11/23 Java/Android
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL