脚本宝典收集整理的这篇文章主要介绍了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类工具库
-
EaselJS
提供了一套完整的,层次化的显示列表的互动方式 来更简单的处理HTML5画布。
-
TweenJS
类库主要用来调整和动画HTML5和Javascript属性。提供了简单并且强大的tweening接口。
-
SoundJS
提供了简单而强大的API来处理音频。通过插件来执行实际的音频实现,无需学习平台相关的知识,简单直接的处理声音。
-
PReloadJS
是一个用来管理和协调相关资源加载的类库,它可以方便的帮助你预先加载相关资源,例如:图片、文件、音频、数据等等。
1.2 CreateJS版本
1.2.1 GitHub
地址:https://github.com/CreateJS
-
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 英文
- 网址:https://www.createjs.com/
- API 文档版本为 v1.0.0
1.2.3 中文
- 网址:http://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 : https://github.com/yuki-torii...
npm i -s yuki-createjs
@H_55_126@
注意这里下载的版本不是官网最新版本。
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:https://github.com/yedaodao/c...
同方法一,下载的不是最新版本。
2.2.2 使 用
import createjs From 'createjs-cmd'
@H_512_331@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:https://github.com/dankuck/vu...
具体可参考GitHub,没有其他参考API,封装成了标签,感兴趣的可以尝试下
3 总结
列了一个表格将5种方法比较一下
序号
方法
版本
推荐
一
yuki-createjs
旧版
✰✰★★★
二
createjs-cmd
旧版
✰✰★★★
三
script-loader
新旧
★★★★★
四
@createjs/easeljs
Beta
✰✰★★★
五
vue-easeljs
旧版
✰✰✰★★
4 后 记
感谢支持。若不足之处,欢迎大家指出,共勉。
如果觉得不错,记得 点赞,谢谢大家 ????
欢迎关注 我的: 【Github】 【掘 金】 【简 书】
本文章采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。
以上是脚本宝典为你收集整理的Vue项目引入CreateJS的方法(亲测)全部内容,希望文章能够帮你解决Vue项目引入CreateJS的方法(亲测)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。