반응형
Vue 앱으로 p5 가져오기
p5 도서관을 돔에 이렇게 추가했는데...
<!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>
그러니까 엄밀히 따지자면windowVue 코드 내 변수...
<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를 정상적으로 Import하여 Vue 앱에서 활용할 수 있을까요?
그냥 무작위로 전화하면 안 돼createCanvas()기능.그 다음에 해야 돼요setup()함수가 호출됩니다.
자세한 내용은 이쪽:이전까지 p5 함수 및 변수를 사용하여 변수를 할당할 수 없는 이유는 무엇입니까?
문제를 해결하려면 콜을 다음 중 하나에 넣어야 합니다.setup()또는 온 디맨드인스턴스 모드(위 링크에서 설명) 또는 인스턴스 모드(여기서 설명)를 사용해야 합니다.
언급URL : https://stackoverflow.com/questions/44250501/importing-p5-into-a-vue-app
반응형
'source' 카테고리의 다른 글
| Vuex: 이 개체에서 유일한 요소를 업데이트하려면 어떻게 해야 합니까? (0) | 2022.07.26 |
|---|---|
| Vue Nuxt에서 API 폴더 감시 및 새로고침 (0) | 2022.07.26 |
| Element UI 테이블 행의 링크를 올바르게 설정하는 방법(간단해야 합니까?) (0) | 2022.07.26 |
| Java에서 어레이를 선언 및 초기화하려면 어떻게 해야 합니까? (0) | 2022.07.26 |
| Java에서 두 개의 필드를 기준으로 정렬하려면 어떻게 해야 합니까? (0) | 2022.07.26 |