【问题标题】：VueJS component to run a MelonJS game运行 MelonJS 游戏的 VueJS 组件
【发布时间】：2016-04-05 07:05:32
【问题描述】：

我正在使用 VueJS 制作一个应用程序，它使用 MelonJS 启动游戏，然后将分数传递到 mongoDB 数据库。

目前，我有一个 .vue 组件，我想将游戏注入其中。

这是游戏应该启动的地方

</template>

<style>
#game-screen {
  background-color: blue;
}
</style>

<script>


</script>

div screen 是运行游戏的地方。原始游戏将文件缩小，并在 index.html 文件中将其注入到该 div 中。

在需要或导入脚本文件时我很困惑。 Vue 是否支持在组件中使用如此大的代码块？如果我链接新项目 html 文件中的文件，一旦组件加载，它是否可以访问 js 和 css 文件？

我的想法是，我可以将它们放入组件中，并且它的行为就像 html 文件一样。

【问题讨论】：

以下评论来自我们 gitter 聊天中的 jsmilovic。也许它会有所帮助： > 我没有使用过 Vue，但在查看文档时，似乎每个 Vue 都有一个 el （您要绑定的元素）以及准备好的事件（vuejs.org/guide/instance.html#Lifecycle-Diagram）。在 melon 中，你提供一个 el 来将你的元素渲染成……所以这个人应该能够创建一个 Vue，它需要所有游戏文件，el 为“#screen”，并且当 ready 事件触发时触发游戏.onload() 将渲染到提供的选择器（在本例中为屏幕）
现在试试这个。太有道理了，我完全忘记了在 Vue 中使用#el。

【解决方案1】：

添加一个正确的答案，这样你就有可以接受的东西，如果它有效，以及更多的采购。

每个 Vue 都有一个 el——这是你要绑定的元素——以及像 ready 这样的事件

在 melon 中，您提供一个 el（这是他们称为包装器的可选 div）来渲染您的元素，因此您应该能够创建一个需要所有游戏文件的 Vue，其 el 为“ #screen"，并且当 ready 事件触发时触发 game.onload()，它将渲染到提供的选择器（在本例中为屏幕）

【讨论】：