Vue-cli3生成的Vue项目加载Mxgraph方法示例
使用Vue-cli3生成Vue项目，并等待项目创建成功。
vuecreate[项目名]
安装mxgraph。
cnpminstallmxgraph--save
安装exports-loader。
cnpminstallexports-loader--save
安装script-loader。
cnpminstallscript-loader--save
在项目根目录新建vue.config.js文件。
将以下内容复制到vue.config.js文件中。
constpath=require('path');
functionresolve(dir){
returnpath.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，替换为以下内容。
运行项目，查看效果。此Demo的源码可以查看
到此这篇关于Vue-cli3生成的Vue项目加载Mxgraph方法示例的文章就介绍到这了,更多相关Vue项目加载Mxgraph内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！