欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解Vue项目引入CreateJS的方法(亲测可用)

程序员文章站 2022-10-15 19:17:37
1 前 言 1.1 createjs介绍   createjs是基于html5开发的一套模块化的库和工具。 基于这些库,可以非常快捷地开发出基于html5...

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 英文

• 网址:

•api 文档版本为 v1.0.0

1.2.3 中文

• 网址:
• 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: ...

同方法一,下载的不是最新版本。

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

2.0 beta版(当前是这样的,由于文章时效性,以后不清楚 :joy::joy::joy:)

2.5 方法五

2.5.1 vue-easeljs

github: ...

具体可参考github,没有其他参考api,封装成了标签,感兴趣的可以尝试下

3 总结

列了一个表格将5种方法比较一下

•类似于 script-loader 还可以使用 imports-loader ,但试了几次没成功:joy::joy:,原谅我太菜了
•2.0 beta 版已支持 es6 ,相信等正式版出的时候,这个问题就完全不用担心了。

以上所述是小编给大家介绍的详解vue项目引入createjs的方法(亲测可用) ,希望对大家有所帮助