详解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 相关文章推荐
[JS源码]超长文章自动分页(客户端版)
Jan 09 Javascript
Jquery事件的连接使用示例
Jun 18 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
vue的toast弹窗组件实例详解
May 14 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
了解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预定义变量使用帮助(带实例)
2013/10/30 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
jQuery each()方法的使用方法
2010/03/18 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
pandas通过loc生成新的列方法
2018/11/28 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
执行Python程序时模块报错问题
2020/03/26 Python
PyQt5实现简单的计算器
2020/05/30 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
美国糖果店:Sugarfina
2019/02/21 全球购物
企业管理标语
2014/06/10 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
校园广播稿100字
2014/10/06 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
使用pytorch实现线性回归
2021/04/11 Python