详解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 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
angular实现input输入监听的示例
Aug 31 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
react实现复选框全选和反选组件效果
Aug 25 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来处理多个提交任务
2006/10/09 PHP
php getsiteurl()函数
2009/09/05 PHP
PHP 第二节 数据类型之数值型
2012/04/28 PHP
php全角字符转换为半角函数
2014/02/07 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
jquery each()源代码
2011/02/14 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
Python函数学习笔记
2008/10/07 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
实习自我鉴定范文
2013/10/30 职场文书
《两只鸟蛋》教学反思
2014/02/10 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
2015年维修工作总结
2015/04/25 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书