導入P5到Vue公司的應用程序

我加入了P5庫到像這樣的DOM ...導入P5到Vue公司的應用程序

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

因此從技術上講，我應該能夠通過window可變我Vue的代碼中抓住它...

<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應用程序中使用它？

來源

2017-05-29 Modelesq

您不能隨意調用createCanvas()函數。您必須在調用setup()函數後執行此操作。

此處瞭解詳情：Why can't I assign variables using p5 functions and variables before setup()?

解決您的問題，您可能需要把你的電話的setup()函數內部，或者你需要使用按需實例模式（如上面的鏈接解釋）或實例模式（如解釋here）。

來源

2017-05-29 21:33:18

哦，對着夥計！非常感謝！ – Modelesq

導入P5到Vue公司的應用程序

回答

相關問題