Vue项目引入CreateJS的方法（亲测）

1 前 言

1.1 CreateJS介绍

CreateJS是基于HTML5开发的一套模块化的库和工具。 基于这些库，能够很是快捷地开发出基于HTML5的游戏、动画和交互应用。

A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5.

包含4类工具库

1. EaselJS 提供了一套完整的，层次化的显示列表的互动方式 来更简单的处理HTML5画布。
2. TweenJS 类库主要用来调整和动画HTML5和Javascript属性。提供了简单而且强大的tweening接口。
3. SoundJS 提供了简单而强大的API来处理音频。经过插件来执行实际的音频实现，无需学习平台相关的知识，简单直接的处理声音。
4. PreloadJS 是一个用来管理和协调相关资源加载的类库，它能够方便的帮助你预先加载相关资源，例如：图片、文件、音频、数据等等。

1.2 CreateJS版本

1.2.1 GitHub

地址：github.com/CreateJS

以 EaselJS 为例，js 文件存放在 lib 文件中

• easeljs.js v0.8.2 带注释版本
• easeljs.min.js v0.8.2 不带注释压缩版本，功能不受影响
• easeljs-NEXT.js v1.0.0
• easeljs-NEXT.min.js v1.0.0

1.2.2 英文

• 网址：www.createjs.com/
• API 文档版本为 v1.0.0

1.2.3 中文

• 网址：www.createjs.cc/
• API 文档版本为 v0.8.2（以 EaselJS 为例）

2 正 文

因为 createjs 各个库中代码都使用了：

this.createjs = this.createjs || {}

由于这里的 this 并非挂载在 window 对象上，因此没法直接从 import 中引用。

2.1 方法一

2.1.1 安装yuki-createjs

GitHub : github.com/yuki-torii/…

npm i -S yuki-createjs
复制代码

注意这里下载的版本不是官网最新版本。

2.1.2 使用yuki-createjs

// include all
import 'yuki-createjs' 
// or 
require('yuki-createjs')
复制代码

// include one
import 'yuki-createjs/lib/preloadjs-0.6.2.combined'
// or
require('yuki-createjs/lib/preloadjs-0.6.2.combined')
复制代码

2.1.3 例 子

// helloworld.vue

<template>
...
    <canvas id="idd11" width="500" height="400"/>
...
</template>

<script>
    require('yuki-createjs/lib/easeljs-0.8.2.combined')
    export default {
        //  这里主要不能放在 created() 里
        mounted(){
            this.init()
        },
        methods: {
            init(){
                var canvas = document.getElementById('idd11')
                var stage = new createjs.Stage(canvas)
                var text = new createjs.Text("Hello World!", "36px Arial", "#777")
                text.textAlign = "center"
                text.x = 100
                text.y = 0
                stage.addChild(text)
                stage.update()
            },
        }
    }
</script>
复制代码

我是直接在 Vue 新建的项目里，HelloWorld.vue 来进行修改， 效果图以下：

2.2 方法二

2.2.1 createjs-cmd

npm i -S createjs-cmd
复制代码

GitHub：github.com/yedaodao/cr…

同方法一，下载的不是最新版本。

2.2.2 使 用

import createjs from 'createjs-cmd'
复制代码

2.3 方法三

2.3.1 script-loader

npm i -S script-loader
npm i -S createjs
复制代码

下载的各个版本都有，能够来引用 1.0.0 版本，可是包含4个库

npm i easeljs 下载的只包含旧版

2.3.2 使 用

import 'script-loader!createjs/builds/1.0.0/createjs.min.js';
复制代码

2.4 方法四

2.4.1 @createjs/easeljs

npm i @createjs/easeljs
复制代码

2.4.2 使 用

import * as createjs from '@createjs/easeljs'
复制代码

2.0 BETA版（当前是这样的，因为文章时效性，之后不清楚 😂😂😂）

2.5 方法五

2.5.1 vue-easeljs

GitHub：github.com/dankuck/vue…

具体可参考GitHub，没有其余参考API，封装成了标签，感兴趣的能够尝试下

3 总结

列了一个表格将5种方法比较一下

序号	方法	版本	推荐
一	yuki-createjs	旧版	✰✰★★★
二	createjs-cmd	旧版	✰✰★★★
三	script-loader	新旧	★★★★★
四	@createjs/easeljs	Beta	✰✰★★★
五	vue-easeljs	旧版	✰✰✰★★

• 相似于 script-loader 还可使用 imports-loader ，但试了几回没成功😂😂，原谅我太菜了

• 2.0 Beta 版已支持 ES6，相信等正式版出的时候，这个问题就彻底不用担忧了。

4 后 记

感谢支持。若不足之处，欢迎你们指出，共勉。

若是以为不错，记得 点赞，谢谢你们 😂

欢迎关注 个人：

本文章采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

出处为：github.com/xrkffgg/Too…