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 wmp操作代码小结(音乐连播功能)
Nov 08 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
jQuery焦点图插件SaySlide
Dec 21 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
Aug 22 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 printf输出格式使用说明
2010/12/05 PHP
php的一个简单加密解密代码
2014/01/14 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
python dict remove数组删除(del,pop)
2013/03/24 Python
python实现从web抓取文档的方法
2014/09/26 Python
Python 逐行分割大txt文件的方法
2017/10/10 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
信息技术教学反思
2014/02/12 职场文书
小学生元旦广播稿
2014/02/21 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
大学迎新生标语
2014/10/06 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
企业员工辞职信范文
2015/05/12 职场文书
荒岛余生观后感
2015/06/09 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
React配置子路由的实现
2021/06/03 Javascript
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL