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

1 前 言

1.1 CreateJS介绍

 

CreateJS是基于HTML5开发的一套模块化的库和工具。

基于这些库，可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。

A suite of modular libraries and tools hich ork together or independently to enable rich interactive content on open eb technologies via HTML5.

包含4类工具库

• EaselJS
• TeenJS
• SoundJS
• PreloadJS

1.2 CreateJS版本

1.2.1 GitHub

地址 https://github./CreateJS

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

easeljs.js
easeljs.min.js
easeljs-NEXT.js
easeljs-NEXT.min.js

1.2.2 英文

• 网址 https://.createjs./

•API 文档版本为 v1.0.0

1.2.3 中文

• 网址 http://.createjs./
• API 文档版本为 v0.8.2（以 EaselJS 为例）

2 正 文

由于 createjs 各个库中代码都使用了

this.createjs = this.createjs || {}

因为这里的 this 并不是挂载在 indo 对象上，所以无法直接从 import 中引用。

2.1 方法一

2.1.1 安装 yuki-createjs

GitHub : https://github./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.bined'
// or
require('yuki-createjs/lib/preloadjs-0.6.2.bined')

2.1.3 例 子

// helloorld.vue

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

 

2.2 方法二

2.2.1 createjs-cmd

npm i -S createjs-cmd

GitHub https://github./yedaodao/c...

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

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版（当前是这样的，由于文章时效性，以后不清楚 :joy::joy::joy:）

2.5 方法五

2.5.1 vue-easeljs

GitHub https://github./dankuck/vu...

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

3

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

•类似于 script-loader 还可以使用 imports-loader ，但试了几次没成功:joy::joy:，原谅我太菜了
•2.0 Beta 版已支持 ES6 ，相信等正式版出的时候，这个问题就完全不用担心了。

以上所述是我给大家介绍的详解Vue项目引入CreateJS的方法（亲测可用） ，如果大家有任何疑问请给我留言，我会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！