Vueify / VueRouter / Laravel -组件未定义

Question

我正在构建一个相对简单的laravel应用程序，并想学习Vue.js.变成了一个非常令人沮丧的烂摊子。

不管怎样，这是个问题。无论我做什么，我都会得到没有定义组件的错误。

这是我拥有的..。

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.

Answer 1

您需要向Vue注册组件。当路由发生变化时，您告诉路由器构建组件视图，但是Vue也需要了解组件。

导入组件后，尝试：Vue.component('Form2016_1099_misc', Form2016_1099_misc);

请参阅：https://vuejs.org/guide/components.html#Registration

Answer 2

很明显我给Vue装了两次。一次来自国家预防机制，另一次来自CDN。我移除了CDN现在它运转良好..。