Vueify/VueRouter/Laravel - コンポーネント私は比較的単純なlaravelアプリケーションを構築し、超イライラ混乱になりつつあるVue.js ...を学びたいと思ってる

Question

を定義していない...とにかく

、ここです問題。私が何をしても、コンポーネントが定義されていないというエラーが出ます。ここで

は...私が持っているもの

Gulpfile私のブレードファイルで

var elixir = require('laravel-elixir'); 
    require('laravel-elixir-vueify'); 

// Elixir Mixins. 
elixir(function(mix) { 
    mix.sass('app.scss'); 
    mix.browserify('main.js'); 
}); 

/resources/assets/js/main.js

var Vue = require('vue'); 
    var VueRouter = require('vue-router'); 
    Vue.use(VueRouter); 
    import Form2016_1099_misc from './components/2016-1099-misc.vue'; 
    Vue.component('Form2016_1099_misc', Form2016_1099_misc); 

です。 ..

@section('content') 
    <div id="app"> 
    <h1>Hello App!</h1> 
    <p> 
     <!-- use v-link directive for navigation. --> 
     <a v-link="{ path: '/recipient' }">Go to Recipient</a> 
     <a v-link="{ path: '/form/2016/1099-misc' }">Go to 1099</a> 
    </p> 
    <!-- route outlet --> 
    <router-view></router-view> 
    </div> 
@endsection 

@section('footer') 
    <script src="{{ asset('/js/main.js') }}"></script> 

    <script> 
    // Define some components 
    var RecipientForm = Vue.extend({ 
     template: '<p>This is the recipient form.</p>' 
    }); 
    var App = Vue.extend({}); 
    var router = new VueRouter(); 

    router.map({ 
     '/recipient': { 
     component: RecipientForm 
     }, 

     '/form/2016/1099-misc': { 
     component: Form2016_1099_misc 
     }, 
    }); 
    router.start(App, '#app'); 
    </script> 
@endsection 

/resources/assets/js/components/2016-1099-misc.vue

<template> 
    {{ msg }} 
</template> 

<style> 

</style> 

<script> 
    export default{ 
     data(){ 
      return{ 
       msg: 'This is a test' 
      } 
     } 
    } 
</script> 

私は一口を実行し、それが正常に動作します。私は私のブラウザでページを表示するために行くとき、私はエラーメッセージ

ReferenceError: Form2016_1099_misc is not defined 

を取得し、私は私が間違って物事の束をやっていることは確かです。私はVueのにスーパー新たなんだと私はそれを把握に苦労しています...

更新：

私はmain.jsファイルに私のブレードファイルからすべてのスクリプトコードを移動し、今main.jsていますこのようになります -

var Vue = require('vue'); 
var VueRouter = require('vue-router'); 
use(VueRouter); 
import Form2016_1099_misc from './components/2016-1099-misc.vue'; 
Vue.component('Form2016_1099_misc', Form2016_1099_misc); 

// Define some components 
var RecipientForm = Vue.extend({ 
    template: '<p>This is the recipient form.</p>' 
}); 

var App = Vue.extend({}); 
var router = new VueRouter(); 

router.map({ 
    '/recipient': { 
    component: RecipientForm 
    }, 

    '/form/2016/1099-misc': { 
    component: Form2016_1099_misc 
    }, 


}); 

router.start(App, '#app'); 

私は今あなたがVueの持つコンポーネントを登録する必要があり、エラーメッセージ

[Vue warn]: Failed to resolve directive: link (found in component: <router-app>) 
[Vue warn]: Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 

Answer 1

を取得します。ルートが変更されたときにコンポーネントビューを作成するようにルータに指示していますが、Vueはコンポーネントについても知っておく必要があります。

あなたのコンポーネントをインポートした後、試してみてください。 Vue.component('Form2016_1099_misc', Form2016_1099_misc);

を参照してください：https://vuejs.org/guide/components.html#Registration

Answer 2

を私は明らかに二回のVueをロードしました。 NPMから1回、CDNから1回私はCDNを削除して、今は正常に動作します...