1
我是Vue的新手，並且遇到了一些麻煩。首先，我關注了本教程：eventbus。如果我把所有的代碼（html，JS和CSS）放在一個html文件中，就像本教程中所描述的那樣。使用VUE的未知自定義元素
但是，我一直在閱讀並且正在關注VUE cli應用程序結構。我用 vue init webpack vueapp01 因此，我有一個index.html文件在vueapp01根文件夾中，在src文件夾中我有一個app.vue和兩個vue文件在components文件夾中; the-box.vue和the-button.vue;以及由vue模板webpack加載的所有其他文件。
而不必在一個HTML文件中的所有代碼（工作）的我的代碼中分離出來是這樣的： 的index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vueapp01</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html><template>
<div id="the-example" class="container">
<h1>Building an Event Bus with <a href="https://vuejs.org" target="_blank">Vue.js</a></h1>
<div class="row">
<div class="col-xs-6">
<the-button what="Event #1"></the-button>
<the-button what="Event #2"></the-button>
<the-button what="Event #3"></the-button>
</div>
<div class="col-xs-6">
<the-box name="Receiver #1"></the-box>
</div>
</div>
</div>
</div>
</template>
<script>
import the-button from './components/the-button'
import the-box from './components/the-box'
export default {
name: 'app',
components: {
the-button,the-box
}
}
</script>
<--
<script>
/******************************************
The Central Event Bus Instance
*******************************************/
let EventBus = new Vue();
</script>/******************************************
Example Root Vue Instance
*******************************************/
new Vue({el: "#the-example"});
/******************************************
A sample Vue.js component that emits an event
*******************************************/
let TheButton = Vue.extend({
\t name: "the-button",
props: ["what"],
template: `
\t <button class="btn btn-md btn-success the-button" @click="makeItHappen()">Sender: {{what}}</button>
`,
methods: {
\t makeItHappen: function(){
\t EventBus.$emit("somethingHappened", this.what)
}
}
});
Vue.component("the-button", TheButton);/******************************************
A sample Vue.js component that received an event
*******************************************/
let TheBox = Vue.extend({
\t name: "the-box",
props: ["name"],
template: `
\t <div class="well">
\t <div class="text-muted">{{name}}</div> \t
\t <div>{{respondedText}}</div>
</div>
`,
data: function(){
\t return {
\t respondedText: null
}
},
\t created: function(){
\t EventBus.$on('somethingHappened', (what)=>{
\t this.respondedText = 'Event Received: ' + what;
})
\t console.log("Responder")
}
});
Vue.component("the-box", TheBox);目前，我發現了錯誤， 「未知的定製元素的盒子」， 「未知的定製元素的按鈕」 。我試着切換腳本和模板命令，讓模板先載入，但我仍然沒有運氣。
任何幫助將不勝感激。另外，我假設我通過將這些組件分離出來分開文件來正確地做到這一點，但如果這是不正確的，我會很樂意接受對學習使用Vue的方式的批評。
'進口從」的按鈕./components/the-button ''是無效的JavaScript。我不確定你是如何得到你所說的。你不能在變量中設置短劃線。 – Bert
@Bert我只是改變了他們的代碼，不包括破折號，我仍然有彈出相同的錯誤。 –
導入單個文件組件時，通常必須指定擴展名，以便通過'vue-loader'運行。那麼你是否在使用'./ components/the-button.vue''導入TheButton？請注意擴展名。 – Bert