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