vue.js-Craftyjs单击不起作用

Question

I have the following code yet nothing happens.

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

Am I missing something?

Edit:

Example code using answer:

<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

Did you initialize Crafty? I tried your code in jsfiddle

// Init 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 link : 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>