详解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 相关文章推荐
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
js判断是否为数组的函数: isArray()
Oct 30 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
javascript制作的滑动图片菜单
May 15 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
使用jQuery实现购物车
Oct 29 jQuery
了解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的变量总结 新手推荐
2011/04/18 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
用PHP代码给图片加水印
2015/07/01 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
javascript编程起步(第三课)
2007/02/27 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
python机器学习实现决策树
2019/11/11 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
人事部主管岗位职责
2013/12/26 职场文书
企业党员个人自我评价
2014/09/20 职场文书
个人自我剖析材料
2014/09/30 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
被告答辩状范文
2015/05/22 职场文书
开天辟地观后感
2015/06/09 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript