将 p5 导入 Vue 应用程序

Question

我像这样将 p5 库添加到 dom 中...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>App</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/addons/p5.dom.js"></script>
</head>
<body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
</body>
</html>

所以从技术上讲，我应该能够通过我的 Vue 代码中的 window 变量获取它...

<template>
    <div id="app">
        <h1>Hey my app!</h1>
    </div>
</template>
<script>
export default {
    name: 'app',
    mounted() {
        console.log(window.p5) // it's found
        window.p5.createCanvas(640, 480);
    },
}
</script>

然而错误日志显示： TypeError: window.p5.createCanvas is not a function。登录 window.p5 后，我可以看到它就在那里。只是不是 createCanvas()。这让我觉得它一开始就没有完全存在。有没有人遇到过这个问题？如何成功导入 p5 并在我的 Vue 应用程序中使用它？

Answer 1

您不能随意调用 createCanvas() 函数。你必须在调用 setup() 函数后执行此操作。

更多信息在这里：Why can't I assign variables using p5 functions and variables before setup()?

要解决您的问题，您需要将调用放在 setup() 函数中，或者您需要使用按需实例模式（如上文所述 link）或实例模式（如 here 所述）。

将 p5 导入 Vue 应用程序

Importing p5 into a Vue app

javascript

vue.js

vuejs2

p5.js