Vueify/VueRouter/Laravel - 組件沒有定義

我建立一個相對簡單laravel應用和想學Vue.js ......這正在變成一個超級令人沮喪的一團糟......Vueify/VueRouter/Laravel - 組件沒有定義

總之，這裏的問題。無論我做什麼，我都會收到錯誤，說明我的組件沒有定義。

這裏就是我有...

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 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.

來源

2016-09-16 Deadlance

您需要註冊與Vue公司的組成部分。你告訴路由器在路由改變時建立一個組件視圖，但Vue也需要知道組件。

後您導入組件，請嘗試： Vue.component('Form2016_1099_misc', Form2016_1099_misc);

參見：https://vuejs.org/guide/components.html#Registration

來源

2016-09-16 17:36:27 theLucre

我添加了Vue.component（'Form2016_1099_misc'，Form2016_1099_misc）;到我的main.js文件並再次運行Gulp（在這裏也更新了主帖），並沒有任何改變。當我在瀏覽器中加載頁面時，我仍然得到相同的「Form2016_1099_misc未定義」 – Deadlance

我顯然是加載Vue公司的兩倍。一次來自NPM，另一次來自CDN。我刪除了CDN，現在它工作正常...

來源

2016-09-17 11:20:48 Deadlance

Vueify/VueRouter/Laravel - 組件沒有定義

回答

相關問題