1
私はVueを使い始めていて、いくつかの問題を抱えています。最初に、私はこのチュートリアルに従っていました：eventbus。すべてのコード（html、JS、CSS）を1つのhtmlファイルに入れると、このチュートリアルで説明したように動作します。VUEを使用している不明なカスタム要素
しかし私は読んでいて、私はVUE cliアプリの構造に従っていました。私は vue init webpack vueapp01 を使用しました。したがって、私はappフォルダにvueapp01ルートフォルダのindex.htmlファイルを持っています。私はapp.vueと2つのvueファイルをコンポーネントフォルダに持っています。 the-box.vueおよびthe-button.vue; vueテンプレートwebpackによって読み込まれた他のすべてのファイルとともに表示されます。
代わりに（作品）1つの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ダッシュを含まないようにコード全体で変更しましたが、私はまだ同じエラーが発生しています。 –
1つのファイルコンポーネントをインポートするときには、通常、 'vue-loader'を通して実行されるように拡張子を指定する必要があります。あなたは '。/ components/the-button.vue''から 'Import TheButton'を使用していますか？拡張に注意してください。 – Bert