javascript - vue.js - craftyjs 点击不起作用

Question

我有以下代码但没有任何反应。

    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>

Answer 1

你初始化了 Crafty 吗？我在 jsfiddle 中尝试了你的代码

//初始化 Crafty:

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");
        });

http://jsfiddle.net/d0Ltog5s/1/

Edit : as per your comment here is the one using vue. (I can't use fiddle for export so used old style

Jsfiddle链接:https://jsfiddle.net/x0es9214/1/

Vue.component('game', {
	template: `<div ref='game' id='game'></div>`,

	data: function () {
  	return {
    	game: null
    };
  },
  mounted: function () {
    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");
        });
        //alert('crafty');
  }
})



new Vue({
	el: '#app'
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-resource/dist/vue-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"></script>
<div id="app">
  <game></game>
</div>