Javascript vue.js-craftyjs单击不起作用

我有下面的代码，但什么也没发生

    Crafty.e('2D, Canvas, Color, Mouse')
        .attr({x: 10, y: 10, w: 40, h: 40})
        .color('orange')
        .bind('Click', function(e){
          alert('clicked', MouseEvent);
          console.log("hello");
          Crafty.log("Clicked right button");
        });

我错过什么了吗

编辑：

使用答案的示例代码：

<template>
    <div ref='game' id='game'></div>
</template>

<script>
  /* eslint-disable no-unused-vars */
  require('@/assets/game/crafty-min.js')
  import image from '@/assets/game/background/environment_forest_evening.png'
  import button from '@/assets/game/buttons/blank-light-blue-button-md.png'
  /* eslint-enable no-unused-vars */

  export default{
    name: 'game',
    data() {
      return {
          game: null
      }
    },
    mounted: function () {
        Crafty.init(500,350, document.getElementById('game'));
        // Crafty.canvas.init();

        Crafty.e('2D, Canvas, Color, Mouse')
            .attr({x: 10, y: 10, w: 40, h: 40})
            .color('orange')
            .bind('Click', function(e){
              alert('clicked', MouseEvent);
              console.log("hello");
              Crafty.log("Clicked right button");
            });
    },
    methods: {
    },
    destroyed () {
      // this.game.destroy()
    },
    updated () {

    }
  }
</script>

<style>
    #game {
        border: 1px solid black;
        margin: auto;
        height: 300px;
        width: 100%;
    }
</style>

---

你很狡猾吗？我在JSFIDLE中尝试了您的代码

//Init狡猾：

Crafty.init();
Crafty.canvas.init();

Crafty.e('2D, Canvas, Color, Mouse')
        .attr({x: 10, y: 10, w: 40, h: 40})
        .color('orange')
        .bind('Click', function(e){
          alert('clicked', MouseEvent);
          console.log("hello");
          //Crafty.log("Clicked right button");
        });

编辑：根据您的评论，这里是使用vue的。我不能用提琴出口，所以用的是老式的

JSIDLE链接：

Vue.组件“游戏”{ 模板：``， 数据：函数{ 返回{ 游戏名称：空 }; }, 安装：功能{ 狡猾的；狡猾的； Crafty.canvas.init； 狡猾。e'2D，画布，颜色，鼠标' .attr{x:10，y:10，w:40，h:40} .颜色“橙色” .bind'Click'，函数e{ 警报“点击”，鼠标事件； console.loghello； //Crafty.logClicked右键； }; //警惕“狡猾”； } } 新Vue{ el:“应用程序” }

---

嗯，很奇怪。我也将它作为Vue的一部分使用，但我不确定为什么它仍然不起作用，我不需要使用Crafty.canvas.init；。我将更新我的代码以显示我所拥有的。@A.Lau我已更新代码。看看这是否有助于解决你的人格问题，你使用的是旧版的狡猾？因为我得到了一个无法读取的属性'init'的undefinedInclusion代码已经存在了，crafty现在是0.8。不过还是要谢谢你，考虑到我想做的事，我觉得这太难了。我只是想用html制作一个原型，因为这将是一个多人游戏