详解Vue项目引入CreateJS的方法（亲测可用）

关于“详解Vue项目引入CreateJS的方法（亲测可用）”，下面是具体的攻略：

前置知识

在做这个项目之前，需要你了解以下技术：

1. Vue.js
2. CreateJS
3. Webpack

步骤一：安装CreateJS

使用npm安装CreateJS:

npm install createjs --save

或者使用yarn安装CreateJS:

yarn add createjs

步骤二：定义CreateJS引用

在main.js中导入CreateJS，创建createjs全局变量：

import * as createjs from 'createjs';
Vue.prototype.$createjs = createjs;

这里通过Vue.prototype.$createjs将CreateJS构造函数设置为Vue全局组件，以便在Vue组件中直接使用createjs。

步骤三：在Vue组件中使用CreateJS

在Vue组件中，可以通过this.$createjs来访问createjs。

示例一：创建Shape

在Vue组件中，创建一个Shape：

<template>
  <canvas ref="canvas"></canvas>
</template>

<script>
export default {
  mounted() {
    const stage = new createjs.Stage(this.$refs.canvas)
    const shape = new createjs.Shape()
    shape.graphics.beginFill("DeepSkyBlue").drawRect(0,0,120,120)
    shape.x = 50
    shape.y = 50
    stage.addChild(shape)
    stage.update()
  }
}
</script>

在这个例子中，创建一个Stage实例，并在舞台上创建一个Shape对象，并添加到舞台中进行显示。

示例二：动画

在Vue组件中，使用Tween实现动画效果：

<template>
  <canvas ref="canvas"></canvas>
</template>

<script>
export default {
  mounted() {
    const stage = new createjs.Stage(this.$refs.canvas)
    const circle = new createjs.Shape();
    circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
    circle.x = 100;
    circle.y = 100;
    stage.addChild(circle);
    createjs.Tween.get(circle, {loop:true})
      .to({x:400}, 1000, createjs.Ease.getPowInOut(4))
      .to({alpha:0,y:175}, 500, createjs.Ease.getPowInOut(2))
      .to({alpha:0,y:225}, 100)
      .to({alpha:1,y:200}, 500, createjs.Ease.getPowInOut(2))
      .to({x:100}, 800, createjs.Ease.getPowInOut(2));
    createjs.Ticker.setFPS(60);
    createjs.Ticker.addEventListener("tick", stage);
  }
}
</script>

在这个例子中，创建一个Shape实例，并通过Tween实现动画效果。可以使用Tween.get()函数获取Tween对象，在Tween对象上定义动画效果。在这个例子中，Circle对象将在舞台上左右移动，同时进行淡出和淡入效果，直到Tween循环停止。

以上是详解Vue项目引入CreateJS的方法，希望对你有帮助。