详解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 相关文章推荐
javascript天然的迭代器
Oct 29 Javascript
js 浏览器事件介绍
Mar 30 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
vue-axios使用详解
May 10 Javascript
原生JS实现不断变化的标签
May 22 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
vue中使用v-model完成组件间的通信
Aug 22 Javascript
JavaScript React如何修改默认端口号方法详解
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
人大复印资料处理程序_输入篇
2006/10/09 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
js实现二级导航功能
2017/03/03 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
vue-cli之router基本使用方法详解
2017/10/17 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
Python解析xml中dom元素的方法
2015/03/12 Python
Python命令行解析模块详解
2018/02/01 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
学校食堂食品安全责任书
2014/07/28 职场文书
大学生学习计划书
2014/09/15 职场文书
团员个人年度总结
2015/02/26 职场文书