详解Vue项目引入CreateJS的方法(亲测可用)
2019/6/26 23:00:46
本文主要是介绍详解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
- 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 中文
? 网址: 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
注意这里下载的版本不是官网最新版本。
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'
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的方法(亲测可用) ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对找一找教程网网站的支持!
这篇关于详解Vue项目引入CreateJS的方法(亲测可用)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南