詳解Vue項目引入CreateJS的方法（親測可用）

CreateJS是基於HTML5開發的一套模塊化的庫和工具。這篇文章主要介紹了Vue項目引入CreateJS的方法（親測）,需要的朋友可以參考下

1 前 言

1.1 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 來進行修改， 效果圖如下：

 

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的方法（親測可用） ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對神馬文庫網站的支持！