在一个vue项目中使用vue-konva,按照vue-konva官方文档步骤
1. 通过 npm 安装
npm install vue-konva konva --save
2. 导入和使用VueKonva
import Vue from 'vue';
import VueKonva from 'vue-konva'
Vue.use(VueKonva)
3. 在您的组件模板中引用
<template>
<v-stage :config="configKonva">
<v-layer>
<v-circle :config="configCircle"></v-circle>
</v-layer>
</v-stage>
</template>
<script>
export default {
data() {
return {
configKonva: {
width: 200,
height: 200
},
configCircle: {
x: 100,
y: 100,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
}
};
}
};
</script>
完成上述步骤后运行出现报错 template or render function not defined.
问题原因:版本不兼容
我用的这些版本组合解决了问题:
"konva": "2.6.0",
"vue": "^2.6.2",
"vue-konva": "2.0.0",
版本组合不唯一,可以根据项目需求更换