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類工具庫

1. EaselJS 提供了一套完整的，層次化的顯示列表的互動方式 來更簡單的處理HTML5畫布。
2. TweenJS 類庫主要用來調整和動畫HTML5和Javascript屬性。提供了簡單而且強大的tweening接口。
3. SoundJS 提供了簡單而強大的API來處理音頻。經過插件來執行實際的音頻實現，無需學習平臺相關的知識，簡單直接的處理聲音。
4. PreloadJS 是一個用來管理和協調相關資源加載的類庫，它能夠方便的幫助你預先加載相關資源，例如：圖片、文件、音頻、數據等等。

1.2 CreateJS版本

1.2.1 GitHub

地址：github.com/CreateJS

以 EaselJS 爲例，js 文件存放在 lib 文件中

• easeljs.js v0.8.2 帶註釋版本
• easeljs.min.js v0.8.2 不帶註釋壓縮版本，功能不受影響
• easeljs-NEXT.js v1.0.0
• easeljs-NEXT.min.js v1.0.0

1.2.2 英文

• 網址：www.createjs.com/
• API 文檔版本爲 v1.0.0

1.2.3 中文

• 網址：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 : 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：github.com/yedaodao/cr…

同方法一，下載的不是最新版本。

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版（當前是這樣的，因爲文章時效性，之後不清楚 😂😂😂）

2.5 方法五

2.5.1 vue-easeljs

GitHub：github.com/dankuck/vue…

具體可參考GitHub，沒有其餘參考API，封裝成了標籤，感興趣的能夠嘗試下

3 總結

列了一個表格將5種方法比較一下

序號	方法	版本	推薦
一	yuki-createjs	舊版	✰✰★★★
二	createjs-cmd	舊版	✰✰★★★
三	script-loader	新舊	★★★★★
四	@createjs/easeljs	Beta	✰✰★★★
五	vue-easeljs	舊版	✰✰✰★★

• 相似於 script-loader 還可使用 imports-loader ，但試了幾回沒成功😂😂，原諒我太菜了

• 2.0 Beta 版已支持 ES6，相信等正式版出的時候，這個問題就徹底不用擔憂了。

4 後 記

感謝支持。若不足之處，歡迎你們指出，共勉。

若是以爲不錯，記得 點贊，謝謝你們 😂

歡迎關注 個人：

本文章採用知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議進行許可。

出處爲：github.com/xrkffgg/Too…