使用 BpmnJS 库创建 vue 项目时出现错误。求大神们给点建议,谢谢!
Vue 版本:3.0.0 BpmnJS 版本:8.8.2
文件 App.vue:
<template>
<div class="containers">
<div class="canvas" ref="canvas"></div>
</div>
</template>
<script>
import BpmnModeler from 'bpmn-js/lib/Modeler'
export default {
name: "App",
data() {
return {
bpmnModeler: null
}
},
methods: {
async createNewDiagram() {
try {
const result = await this.bpmnModeler.importXML(bpmnXmlStr); //bpmnXmlStr is an bpmn2 diagram xml content
const { warnings } = result;
console.log(warnings);
}
catch (err) {
console.log(err);
}
}
},
mounted() {
const canvas = this.$refs.canvas
this.bpmnModeler = new BpmnModeler({
container: canvas
})
this.createNewDiagram()
}
}
</script>
<style lang="scss">
@import '~bpmn-js/dist/assets/diagram-js.css';
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
.containers {
position: absolute;
background-color: #ffffff;
width: 100%;
height: 100%;
.canvas {
width: 100%;
height: 100%;
}
.bjs-powered-by {
display: none;
}
}
</style>
文件包.json:
{
"name": "project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"bpmn-js": "^8.8.2",
"core-js": "^3.6.5",
"sass": "^1.43.4",
"sass-loader": "10.0.1",
"vue": "^3.0.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}