详解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 相关文章推荐
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
javascript 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
使弱类型的语言JavaScript变强势
Jun 22 Javascript
js实现简洁的TAB滑动门效果代码
Sep 06 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
小程序开发基础之view视图容器
Aug 21 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 Javascript
Node.js 深度调试方法解析
Jul 28 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编程语言开发动态WAP页面
2006/10/09 PHP
php中的strpos使用示例
2014/02/27 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
讲解Python中的递归函数
2015/04/27 Python
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
Python实现身份证号码解析
2015/09/01 Python
python字典DICT类型合并详解
2017/08/17 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
python实现大学人员管理系统
2019/10/25 Python
Python pickle模块实现对象序列化
2019/11/22 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
Python如何用filter函数筛选数据
2020/03/05 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
python实现经纬度采样的示例代码
2020/12/10 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
世界上最大的隐形眼镜商店:1-800 Contacts
2018/11/03 全球购物
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
《春晓》教学反思
2014/04/20 职场文书
运动会方队口号
2014/06/07 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
二手房购房协议书范本
2014/10/05 职场文书
关于召开会议的通知
2015/04/15 职场文书
民事辩护词范文
2015/05/21 职场文书