如何在Vuejs中加载Pixi实例？

Question

我正在VueJS组件中学习PixiJS，如下所示。貔貅教程而我的控制台显示这个错误。

vue.runtime.esm.js?2b0e:619 [Vue warn]: 渲染中出错。"TypeError: 循环结构转换为JSON

<template>
  <div>
    {{ displayPixi() }}
  </div>
</template>

<script>
  import * as PIXI from 'pixi.js'

  export default {
    name: 'HelloWorld',

    methods: {
      displayPixi() {
        return new PIXI.Application({width: 256, height: 256})
      }
    }
  }
</script>

如何在VueJS中加载Pixi实例？

Answer 1

好了，你真正需要做的是按照你提供的教程去做。

正如你所看到的，在应用程序被创建后，你需要将其视图附加到一些东西上。

如同该教程中所报告的一个例子 document.body.appendChild(app.view);

以 "Vue "的方式举个例子，在数据中你可以定义为

data(){
 return {
   app: new Application(...)
 }

在你安装的钩子上，你可以

 mounted(){
   this.$el.appendChild(this.app.view)
 }

这只是一个例子，做我说的挂载钩子，它不是最好的解决方案，因为如果有条件渲染，它会发射，但它将服务于原因。