Vue.js “我该如何解决？”；TypeError:vue_p5_网页包_导入的_模块_8_。createCanvas不是函数"；在嵌套的vue组件中尝试使用p5.js时？

我当前正在尝试在vue.js中创建此应用（），作为我的app.vue文件的vue组件

当我尝试调用vue组件（我称之为Whiteboard.vue）中的设置函数时，出现以下错误：

[Vue warn]: Error in v-on handler: "TypeError: vue_p5__WEBPACK_IMPORTED_MODULE_8__.createCanvas is not a function"

found in

---> <Whiteboard> at src/components/Whiteboard.vue
       <App> at src/App.vue
         <Root>

[Vue warn]：v-on处理程序中出现错误：“TypeError:Vue_p5_网页包_导入的_模块_8_。createCanvas不是函数”
发现于
--->位于src/components/Whiteboard.vue
在src/App.vue

我是否做了一些根本错误的事情，或者是由于我的方法和链接的应用程序之间的版本差异导致了问题

这些是我代码的相关部分（据我判断，它们与问题相关：D），（我更改了firebase配置数据）：

打我
从“Vue”导入Vue；
从“firebase”导入firebase；
从“p5”中导入p5；
从“vue-p5”导入*作为vuep5；
//初始化Firebase
变量配置={
apiKey:“--------------”，
authDomain:“--------------”，
数据库URL:“--------------”，
projectId:“--------------”，
storageBucket:“---------------------”，
messagingSenderId:“----------------------”
};
firebase.initializeApp（配置）；
var pointsData=firebase.database（）.ref（）；
var点=[]；
函数设置（）{
var canvas=vuep5.createCanvas（15001500）；
vuep5.background（255）；
vuep5.fill（0）；
pointsData.on（“添加的子项”，函数（点）{
points.push（point.val（））；
});
画布。鼠标按下（绘图点）；
canvas.mouseMoved（函数（）{
如果（按下鼠标）{
支点（）；
}
});
}
函数绘图（）{
背景（255）；
对于（变量i=0；i

我的目标是创建一个实时协作白板绘图应用程序 使用vue，firebase的实时数据库&p5。

---

提前谢谢你的建议

我敢打赌您需要使用vue-p5包中的实例模式或某种包装函数。我敢打赌您需要使用vue-p5包中的实例模式或某种包装函数。

<template>
      <div>
        <button @click="execute">hit me</button>
      </div>
    </template>



    <script>
    import Vue from "vue";
    import firebase from "firebase";
    import p5 from "p5";
    import * as vuep5 from "vue-p5";

    // Initialize Firebase
    var config = {
      apiKey: "------------",
      authDomain: "--------------",
      databaseURL: "--------------",
      projectId: "-------------",
      storageBucket: "----------------",
      messagingSenderId: "----------------"
    };
    firebase.initializeApp(config);

    var pointsData = firebase.database().ref();
    var points = [];

    function setup() {
      var canvas = vuep5.createCanvas(1500, 1500);
      vuep5.background(255);
      vuep5.fill(0);
      pointsData.on("child_added", function(point) {
        points.push(point.val());
      });
      canvas.mousePressed(drawPoint);

      canvas.mouseMoved(function() {
        if (mouseIsPressed) {
          drawPoint();
        }
      });
    }

    function draw() {
      background(255);
      for (var i = 0; i < points.length; i++) {
        var point = points[i];
        ellipse(point.x, point.y, 5, 5);
      }
    }

    function drawPoint() {
      pointsData.push({
        x: mouseX,
        y: mouseY
      });
      return false;
    }

    export default {
      name: "Whiteboard",
      data() {
        return {};
      },
      methods: {
        execute() {
          setup();
          draw();
          drawPoint();
        }
      }
    };
    </script>