如何将 CreateJS 导入 VueJS .vue 组件？

Question

提前致歉，总的来说，我对 Vuejs 还是很陌生。我正在尝试将 CreateJS / SoundJS 导入 .vue 组件。我已经通过 npm 安装了 CreateJS。我只是不知道如何将库导入组件，以便我可以引用声音功能。我似乎无法在 CreateJS 文档中找到任何此类用法的任何内容...任何代码或参考链接将不胜感激。谢谢！

Answer 1

嗯，我做了一个例子，使用 CreateJS/SoundJS 库从它的 CDN 导入它。

在public/index.html文件中，添加标签：

<script src="https://code.createjs.com/1.0.0/soundjs.min.js"></script>

现在您的项目中有了该库，您可以访问它及其功能。

在 src/main.js 中添加要与 Vue 一起使用的库，将其添加到 Vue 原型中：

import Vue from "vue";
import App from "./App.vue";
const createjs = window.createjs; // Get the createjs instance from window object

Vue.config.productionTip = false;
Vue.prototype.createjs = createjs; // Add the createjs instance to the Vue prototy, to use this.createjs

new Vue({
  render: h => h(App)
}).$mount("#app");

在src/App.vue组件（或任何组件，但App.vue是应用程序的入口点，所以这是一个很好的地方）配置声音：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <button @click="play">Play</button>
    <!-- button to call the play method -->
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
const hornSound = require("@/assets/hey.mp3"); // Store a mp3 file in a variable, You can add more sounds, here on in another components

export default {
  name: "App",
  components: {
    HelloWorld
  },
  methods: {
    play() {
      this.createjs.Sound.play("Horn"); // Acces and play the sound with the id "Horn"
    }
  },
  created() {
    const soundId = "Horn"; // Id of the sound to be registered 
    this.createjs.Sound.registerSound(hornSound, soundId); // Register the sound, using the mp3 and the id
    // You can do this with any amount of sounds, here or in any component
    // Once a sound is registered, you have access to it in all the components
  }
};
</script>

从子组件播放声音 (src/components/HelloWorld.vue):

    <template>
      <div class="hello">
        <h3>Hello World with createjs/soundjs</h3>
        <button @click="playFromChild">Play inside child component</button>
      </div>
    </template>

    <script>
    export default {
      name: "HelloWorld",
      props: {
        msg: String
      },
      methods: {
        playFromChild() {
          this.createjs.Sound.play("Horn"); // We are accessing to the sound with id "Horn" without import anything
        }
      }
    };
    </script>

我希望这对你有帮助，我试图解释如何使用它，但正如你所说，没有关于它的文档，所以这可能很棘手但它有效。

如何将 CreateJS 导入 VueJS .vue 组件？

How do I import CreateJS into a VueJS .vue component?

javascript

vue.js

createjs

soundjs