详解Vue项目引入CreateJS的方法(亲测可用)


Posted in Javascript onMay 30, 2019

1 前 言

1.1 CreateJS介绍

详解Vue项目引入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 来进行修改, 效果图如下:

详解Vue项目引入CreateJS的方法(亲测可用) 

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的方法(亲测可用) ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JsRender for index循环索引用法详解
Oct 31 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
js动态引入的四种方法
May 05 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
利用promise及参数解构封装ajax请求的方法
Mar 24 Javascript
了解JavaScript函数中的默认参数
May 30 #Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 #Javascript
轻松学习JavaScript函数中的 Rest 参数
May 30 #Javascript
细说Vue组件的服务器端渲染的过程
May 30 #Javascript
了解JavaScript中let语句
May 30 #Javascript
koa+jwt实现token验证与刷新功能
May 30 #Javascript
深入理解JavaScript 箭头函数
May 30 #Javascript
You might like
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
pycharm运行scrapy过程图解
2019/11/22 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
二手书店创业计划书
2014/01/16 职场文书
人力资源专员岗位职责
2014/01/30 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
旅游活动总结
2014/08/27 职场文书
新年祝酒词大全
2015/08/11 职场文书
python神经网络ResNet50模型
2022/05/06 Python