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类工具库
EaselJS
TweenJS
SoundJS
PreloadJS
1.2 CreateJS版本
1.2.1 GitHub
地址： https://github.com/CreateJS
以 EaselJS 为例， js 文件存放在 lib 文件中
easeljs.js
easeljs.min.js
easeljs-NEXT.js
easeljs-NEXT.min.js
1.2.2 英文
• 网址： https://www.createjs.com/
•API 文档版本为 v1.0.0
1.2.3 中文
• 网址：
• API 文档版本为 v0.8.2（以 EaselJS 为例）
2 正 文
由于 createjs 各个库中代码都使用了：
this.createjs = this.createjs || {}
因为这里的 this 并不是挂载在 window 对象上，所以无法直接从 import 中引用。
2.1 方法一
2.1.1 安装 yuki-createjs
GitHub : https://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/> ... </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： https://github.com/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.com/dankuck/vu...
具体可参考GitHub，没有其他参考API，封装成了标签，感兴趣的可以尝试下
3 总结
列了一个表格将5种方法比较一下
•类似于 script-loader 还可以使用 imports-loader ，但试了几次没成功:joy::joy:，原谅我太菜了
•2.0 Beta 版已支持 ES6 ，相信等正式版出的时候，这个问题就完全不用担心了。
以上所述是小编给大家介绍的详解Vue项目引入CreateJS的方法（亲测可用） ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: