Importing p5 into a Vue app

问题

I added the p5 library into the dom like so...

<!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>

So technically I should be able to grab it via window variable within my Vue code...

<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>

Yet error logs show: TypeError: window.p5.createCanvas is not a function. After logging window.p5, I can see that it's there. Just not createCanvas(). Which makes me think it's not fully there to begin with. Has anyone experienced this problem? How can I successfully import p5 and make use of it in my Vue app?

回答1:

You can't just randomly call the createCanvas() function. You have to do it after the setup() function is called.

More info here: Why can't I assign variables using p5 functions and variables before setup()?

To fix your problem, you either need to put your call inside the setup() function, or you need to use on-demand instance mode (as explained in the above link) or instance mode (as explained here).

来源：https://stackoverflow.com/questions/44250501/importing-p5-into-a-vue-app

标签

javascript

Vue.js

vuejs2

p5.js