为了账号安全,请及时绑定邮箱和手机立即绑定

如何将创建JS导入到 VueJS .vue 组件中?

如何将创建JS导入到 VueJS .vue 组件中?

哔哔one 2022-09-16 20:55:28
我提前道歉,总的来说,我对Vuejs还很陌生。我正在尝试将创建JS / 声音JS导入到.vue组件中。我已经通过 npm 安装了创建JS。我只是不知道如何将库导入组件,以便我可以引用声音函数。我似乎无法在CreateJS文档中找到任何用于此类用法的内容...任何代码或参考链接将不胜感激。谢谢!
查看完整描述

1 回答

?
万千封印

TA贡献1891条经验 获得超3个赞

好吧,我使用创建JS / 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/组件/你好世界.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>

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


查看完整回答
反对 回复 2022-09-16
  • 1 回答
  • 0 关注
  • 167 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信