![](/img/trans.png)
[英]How do I use the JavaScript file in a vue component in the context of Vuejs
[英]How do I import CreateJS into a VueJS .vue component?
我提前道歉,總的來說,我對 Vuejs 還是很陌生。 我正在嘗試將 CreateJS / SoundJS 導入到 a.vue 組件中。 我已經通過 npm 安裝了 CreateJS。 我只是不知道如何將庫導入到組件中,以便可以引用聲音函數。 對於這種用法,我似乎在 CreateJS 文檔中找不到任何內容......任何代碼或參考鏈接將不勝感激。 謝謝!
好吧,我做了一個示例,使用 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>
我希望這對你有所幫助,我試圖解釋如何使用它,但正如你所說,沒有關於它的文檔,所以這可能很棘手,但它有效。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.