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 相关文章推荐
用YUI做了个标签浏览效果
Feb 20 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
jQuery插件开发基础简单介绍
Jan 07 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
vue实现个人信息查看和密码修改功能
May 06 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 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
php 过滤危险html代码
2009/06/29 PHP
php设计模式 State (状态模式)
2011/06/26 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
浅谈python中的变量默认是什么类型
2016/09/11 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
Python递归实现打印多重列表代码
2020/02/27 Python
Python如何定义接口和抽象类
2020/07/28 Python
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
什么是托管函数?托管函数有什么用?
2014/06/15 面试题
国际贸易个人求职信范文
2014/01/04 职场文书
医学类个人求职信范文
2014/02/05 职场文书
李开复演讲稿
2014/05/24 职场文书
电子商务求职信
2014/06/15 职场文书
检讨书范文1000字
2015/01/28 职场文书
浅析Python中的随机采样和概率分布
2021/12/06 Python
Java设计模式之代理模式
2022/04/22 Java/Android